Components, blocks and original art for shadcn: rich surfaces, quiet motion, and orbs. A free library under MIT, with full access to the rest.
Four-step CSV contact import with numbered triggers: a drop zone that reads the file's name and row count in the browser, a column mapping table, a preview table and an import step.
Bars variant of Import Wizard: CSV upload with an in-browser row count, column mapping, a preview table and import confirmation, tracked by a segmented rail rather than numbered steps.
Status-page incident report with a Resolved badge, duration and affected services in the header, then four updates newest first, from Resolved back to Investigating, each with a time and note.
Single-line text input on Base UI with a soft filled background, rounded pill shape and file-input styling. Includes focus ring, disabled and invalid states, and drops to small text from md up.
Wraps an Input or Textarea with inline or block addons for icons, text, keyboard hints and small buttons. Clicking an addon focuses the input, and the whole group carries one focus ring.
One-time code input built on the input-otp package with grouped slots, a blinking fake caret and a dash separator. The active slot shows a focus ring and invalid groups turn destructive.
Copyable shell command in an InputGroup: a $ prompt, the command in Geist Mono and a copy button. If copying fails it selects the text and shows a hint; add the dark class over art.
Vertical, non-linear install checklist with a shadcn CLI command in a monospace block under each open step. Done, next ticks the step and moves focus to the following title.
Install command with the package manager as a gliding segmented switch inside the pill: pick pnpm, npm, yarn or bun and the command rewrites; the copy button copies the one showing. Narrow, the switch takes the pill's top row. Add the dark class over art.
Instrument Serif at weight 400, bound to --font-instrument-serif with a Georgia fallback. The face the typeset-instrument preset reads, pulled in by blocks such as hero, pricing, features and resources.
Issue report card with area and severity selects, a subject input and a details textarea under mono uppercase labels. Validates with react-hook-form and zod, sends FormData to a React action, then resets.
Flexible list row with media, content, title, description, actions, header and footer parts. Default, outline and muted variants in three densities; renders as a link through Base UI useRender.
Inline keyboard key label in a small muted rounded box, plus a group wrapper for key combinations. Adapts its colors when placed inside an input group or a tooltip.
Plain form label with small medium-weight text that dims when its peer control or parent field is disabled. A native label element with no primitive library dependency.
Card with a single-series line chart of average session minutes by month, each point labelled with its value, and a footer note on the trend. Client component on recharts 3.8.
Left-aligned light 404: eyebrow, headline and description start the column, and a flush arrow link leads home instead of a filled button. No artwork.
Plain light 404 with no artwork: centered eyebrow, headline and description, a primary back-home button and a contact-support link with a trailing arrow.
Card with a two-series area chart of daily listeners, desktop solid and mobile dashed, a select for 90, 30 or 7 days and a legend that draws the dash. Client component on recharts 3.8.
Card with a radar chart scoring six listening moods out of 100, each axis label carrying its score so the values read without the shape. Client component on recharts 3.8.
Logo cloud parts: a labelled list laid out as a centred grid, a single wrapping baseline, two columns or muted tiles. Each logo takes an img, svg or text wordmark at three sizes, with a greyscale muted variant.
Light logo grid of six icon-and-name marks above a GlowSeam rule, closed by a line of customer copy and an underlined link to customer stories.
Loop settings card with loop in and out times typed as m:ss, a large computed loop length, and fade in and out times in a collapsible section. Mono labels; controlled or uncontrolled.
Start-aligned maintenance notice on the card surface with a bottom border, a clock icon that hides on phones, a status-page link and a dismiss button.
Marcellus at weight 400, an inscriptional serif bound to --font-marcellus-face. It sets the labels of Sphere Button and is pulled in by a few CTA, stats and 404 blocks.
Small muted inline note line with icon and content slots. Variants add hairline rules on both sides of centred text or a bottom border; renders as any element through Base UI useRender.
Desktop-style menubar on Base UI that holds several menus in one bordered bar. Reuses Dropdown Menu for content, items, shortcuts and nested submenus; its checkbox and radio items show the check on the left.
A hamburger icon Button that morphs into a close cross. The animation is driven entirely by aria-expanded, so the visual state and the screen-reader state stay in sync.
Chat message row with group, avatar, content, header and footer parts. Aligns to the start or end and reverses for outgoing messages; pairs with Bubble for the message body.
Chat transcript scroller from @shadcn/react with provider, viewport, content and item parts. Keeps the view pinned while messages stream in, fades the bottom edge and shows a scroll-to-end button.
Compact KPI card: a metric name, a large tabular value, an optional outline badge with a trend-up or trend-down icon and screen-reader label, and an optional description line.
Roadmap or company history as an ordered list on Grid, in grid or rows layout. Rules can be off, a top border per item, or one fading horizon line with dots; the current milestone's dot is filled.
Plain about section: a heading beside two paragraphs, stacking on narrow screens. Theme tokens only, light and dark.
Plain about section: a heading beside two paragraphs, then a row of three figures with labels. Theme tokens only, light and dark.
Plain centered call to action: a heading, a description and a primary and an outline button. Theme tokens only, light and dark.
Plain centered hero: a small eyebrow, a large headline, a description and a primary and an outline button. Theme tokens only, light and dark.
Plain testimonials: a heading above three quotes ruled apart, side by side on wide screens and stacked on narrow ones, each with a name and role. Theme tokens only, light and dark.
Plain feature section: a heading and description above three cards, each with a title, a line of copy and a Learn more link. Theme tokens only, light and dark.
Plain feature section: a heading and description above a three-column grid of six features, each a title and a line of copy. Theme tokens only, light and dark.
Plain bento: a heading above four cards in a three-column grid, two of them wide, each with a large figure, a title and a line of copy. Theme tokens only, light and dark.
Plain resources section: a heading above three guide cards, each with a reading time, a title, a line of copy and a Read the guide link. Theme tokens only, light and dark.
The plainest logo cloud: six Phosphor icon marks with names in a centred grid that runs to a single row on wide screens, with no heading or copy.
Plain left-aligned hero: a small eyebrow, a large headline, a description and a primary and a ghost button. Theme tokens only, light and dark.
Plain sign-in card: a title, email and password fields with a forgot-password link, a sign-in button and a link to create an account, validated with React Hook Form and Zod. Theme tokens only, light and dark.
Minimal navbar for the Eudoxia wordmark: three text links, a ghost log in link and an outline get started button, collapsing to a Sheet menu in narrow containers.
Plain single testimonial: a large centered quote with the speaker's name and role below. Theme tokens only, light and dark.
Plain pricing: a centered heading above one plan card with price, period, a checked feature list and a trial button. Theme tokens only, light and dark.
Plain split call to action: heading and description on the left, a primary and an outline button beside them on wide screens and below on narrow ones. Theme tokens only, light and dark.
Plain stats: a heading above three large figures on filled panels, each with a label. Theme tokens only, light and dark.