Browse and Copy ShipUI Components Without Buying a Theme
ShipUI now has a component browser.
It's a single page that shows every UI component and page section across all 11 ShipUI themes. Filter by category or theme, click into any component, and get a live preview, usage snippet, and the full source code ready to copy.
What it includes
Every component in the browser has three things:
Live preview. An iframe showing the actual component in its theme context. Not a screenshot. The real thing, rendered at full fidelity.
Usage snippet. The exact JSX you'd write to drop it into a page, with props filled in.
Source code. The full component file. One copy button.
Some components also show variant examples: all button sizes, all badge color variants, all card compositions. You see what's possible before you commit to copying anything.
Why this exists
The original ShipUI model was: buy a theme, get everything. That still works. But it's a big ask if you only need a few components, or if you're evaluating whether a theme's aesthetic fits your project.
The component browser changes the evaluation flow. You can browse FOLIO // NEXT cards, NOIR // NEXT badges, and HAIKU // NEXT buttons in the same session. Compare the aesthetics side by side. Find what fits, then decide.
It also makes copy-paste practical. Individual component pages link directly to the theme's source file, so you know exactly what you're copying and where it came from.
How it's organized
Components are grouped into two categories:
- UI — primitive components: buttons, badges, cards, text variants, inputs
- Section — full page sections: hero, features, about, newsletter CTA
Each component card shows the theme it belongs to, whether the theme is free or paid, and a direct link to the component detail page.
The filter works off the URL, so you can link to filtered views directly. /components?theme=folio shows only FOLIO components. /components?category=ui shows only UI primitives across all themes.
Free components are included
CANDY // NEXT is a free theme. Its components are in the browser, source included, no purchase required.
Paid theme components show the source too. The value of buying a theme isn't the source of one component in isolation. It's the full design system: consistent tokens, all components working together, auth pages, error states, and the .cursorrules and CLAUDE.md from ShipKit if you add the bundle.
The component list will grow
Every new ShipUI theme adds its components to the browser on launch. The goal is to build the most complete library of copy-paste Next.js components across multiple design aesthetics.
If you find a component you like, the theme detail page is one click away from every component view.