STARCK UI is a small, opinionated collection of open-code components built on
shadcn. Every component starts in a real STARCK product and is extracted only
after it proves useful.
Install a component
Add the source directly to an existing shadcn project:
pnpm dlx shadcn@latest add @starck/liquid-glass-navbar
STARCK UI is listed in the shadcn registry directory,
so the CLI resolves the @starck namespace with no extra configuration.
The component becomes part of your codebase. Change it, restyle it, and make it
yours.
Components
| Component | What it does |
|---|
| Liquid Glass Navbar | Responsive navigation with expandable or fixed width, Chromium refraction, and a blur fallback. |
| Blue CTA Button | A dimensional call to action with sampled color tones, a specular rim, a quick press state, and macOS or Windows platform modes. |
| Gradient FAQ | An animated, crawlable accordion. |
| Scroll Reveal | Progressive reveal and stagger primitives with reduced-motion support. |
| Terminal Command | A copyable command block with stable feedback and familiar macOS chrome. |
| MacBook Mockup | A responsive device frame with an accessible optional fullscreen preview. |
| Sticky Product CTA | A compact, scroll-aware product bar that keeps the next action within reach. |
| Social Proof | An accessible avatar stack, rating, and trust label. |
| Testimonials Grid | A featured testimonial paired with quieter supporting stories. |
| What’s New Card | A focused product-update card with version, date, summary, and destination. |
| Release History Dialog | Responsive release notes with body lock, Escape handling, and structured entries. |
| Single Pricing Card | An opinionated one-plan pricing card for focused products. |
| Pricing Block | A responsive multi-plan block built from the single-plan card. |
| Provider Orbit | A reduced-motion-aware integration orbit that pauses on inspection. |
| Morphing Download Icon | An Apple-to-download icon transition for Mac download calls to action. |
| Founder Note | A personal maker’s note with avatar, story, and contact links. |
Principles
- Real product use comes before inclusion.
- The live preview and usage example show the same component configuration.
- Accessibility, responsive behavior, and reduced motion are part of the component.
- STARCK UI provides craft defaults, not a mandatory brand skin.
- The registry source is canonical; the website renders that same source.
Development
pnpm install
pnpm dev
Registry source lives in registry/default. Rebuild the public registry after a
component changes:
pnpm registry:build
Before opening a pull request, run:
pnpm typecheck
pnpm lint
pnpm build
See CONTRIBUTING.md before proposing a component.
License and assets
The source code is available under the MIT License.
Third-party photographs and device mockup assets in public/preview are not
relicensed by this repository and remain subject to their original terms. The
product names and marks shown in demos belong to their respective owners and
are not granted under the MIT License.
