Components, blocks and original art for shadcn: rich surfaces, quiet motion, and orbs. A free library under MIT, with full access to the rest.
Command palette built on cmdk with a search input, filtered list, groups, items, shortcuts and separators. CommandDialog opens it inside Dialog with a screen-reader-only title and description.
Small new-project card that walks three steps (name, details, access) with a row of dot indicators and the current step title beside them, for dialogs where a full stepper is too loud.
Company history in three columns under a top rule, one per year, each with a date, title and paragraph. No markers; a header and description sit above.
Corner glow from two blurred conic color wheels, so the hue shifts as the light wraps the edge. A full-bleed overlay for a positioned card; rotation aims which hues land on the corner.
Contact section in two intro-column rows: department cards with mailto and tel links, then office cards with street addresses. Built from Section, Card and DescriptionList with Orbcore sample details.
A responsive grid of six contact cards, up to three columns, each with a greyscale Cloud shape avatar, name, role badge and title, and a ruled footer split into Email and Call links.
A single card listing four on-call contacts as rows with a greyscale Cloud shape avatar, name, title and an outline Email button. Rows are divided by hairlines under a header and description.
Contact sales form in one narrow column: first and last name, optional company, email, country select with phone, message and a privacy consent checkbox. Validated with react-hook-form and zod.
Right-click menu on Base UI with items, destructive variant, checkbox and radio items, labels, separators, keyboard shortcuts and nested submenus. Opens to the right of the pointer by default.
Centered CTA with heading, description and a Book a walkthrough button above three onboarding steps on Milestones, joined by one rule and aligned left, center and right.
Pinned-dark email signup with a centered Instrument Serif headline, description and a glass pill input group holding the email field and Get started button, over a warm grained floor.
Dark FAQ section grouped by topic, each topic a heading and blurb beside its question list, with a GlowSeam line of light dividing one topic from the next. Sample topics cover installing, customizing and licensing.
A card holding a Date Range Picker: a labelled trigger that opens a two-month range calendar in a popover, preset to a 20-day span. Uses date-fns to build the default range.
Date range field: an outline button showing the formatted range opens a popover with a two-month range Calendar. Works controlled or uncontrolled and formats dates with date-fns.
Dark 404 on a night road: a DEAD END warning sign beside a highway guide sign, then a monospace code, large headline, body and home button. Pulls in Geist Mono and Hanken Grotesk.
Semantic label and value rows for order details, specifications or account details. Default spaces rows on a gap; divided rules a line between them. Long values wrap under their term.
Centred modal dialog on Base UI with blurred overlay, header, title, description and footer. A ghost close Button sits in the top corner by default, and the footer can add its own Close button.
Re-exports the Base UI DirectionProvider and useDirection hook so a subtree can switch between left-to-right and right-to-left layout for the primitives that read text direction.
Card with a diverging column chart of week-on-week change by day, bars rising and falling from a zero reference line with signed percentage labels. Client component on recharts 3.8.
Custom-domain card in three numbered steps: enter the domain, copy the A and CNAME records from a monospace block, then verify with a pending or active badge. The check is a stand-in.
Segmented-bar version of Domain Setup: the same domain, DNS record and verification panels in a card, with progress drawn as bars and step titles kept for screen readers.
Card with a donut chart of minutes by genre, the total printed in the center, and a footer list giving each genre's swatch, minutes and share. Client component on recharts 3.8.
Swipeable drawer on Base UI that opens from any edge, with snap points, nested drawer stacking, an optional swipe handle and an overlay that fades with swipe progress. Modal by default.
Button-triggered menu on Base UI with items, destructive variant, checkbox and radio items, group labels, shortcuts and nested submenus. The popup is at least as wide as its trigger and animates in.
Empty-state layout with header, media, title, description and content slots, centred inside a padded box. The media slot has a plain variant and an icon variant on a muted rounded square.
Card with a two-line chart comparing this week's exercise minutes against the average by day, both drawn in primary ink with the average at half strength. Client component on recharts 3.8.
Short label set above a heading. Default is 12px uppercase Geist Mono with wide tracking in muted ink; sans is a 14px semibold line in sentence case. Pulls in the Geist Mono font item.
Expandable FAQ built on the stock Accordion. Pass an array of entries with an id, question and answer; each becomes an accordion item whose trigger keeps a visible focus outline.
Always-open FAQ as a description list on Grid. Stack sets question and answer pairs in up to three columns; split rules the pairs apart and sets each question beside its answer when wide.
Feature list parts: a Grid rendered as a list in one to four columns or a divided single column, with feature, title and description parts and an outline item that rules its left edge.
Form field system with fieldset, legend, group, label, title, description, separator and error parts. Vertical, horizontal and container-responsive layouts; the error part dedupes messages.
An Explorer card showing a nested project file tree with collapsible folders, rotating carets and the selected file's path in the header. Folder and file rows are ghost buttons with Phosphor icons.
Footer of five link columns (Product, Company, Resources, Legal and Social) above a fineprint copyright line, built on the Footer parts.
Flight itinerary timeline with local times as titles, airport codes in Geist Mono tags, a layover row between legs, and a plane mark with a Boarding badge on the current leg.
Composable site footer parts: background, tinted band, wordmark, newsletter column, link columns in counts of two to five, a centered link row, fine print and social links. Links accept your router's Link.
A translucent Button for use over art: a blurred, faint background-tinted fill with a border and inner glow that follow currentColor. Needs a backdrop behind it for the blur to read.
Geist variable sans, bound to --font-geist. The kit's globals read it first in --font-sans, so it sets the default body face for every component without being listed per item.
Geist Mono variable, bound to --font-geist-mono and read by --font-mono in the globals. Pulled in by items with mono labels and code, such as Eyebrow, Chart, Thermal Button and the chat pieces.
Two lit divider marks: GlowSeam, a rose horizontal section seam, and StandingSeam, a cool vertical line that lights only the active tab trigger. Each glows on dark and becomes ink on light.
Single-layer grain in four treatments: plain noise, paper and sandpaper at overlay, square at soft-light. Intensity steps from fine to rich or takes an exact opacity; isolated contains the paint.
Container-query grid that steps from one column up to six by the width of its own wrapper rather than the viewport, with shared gap sizes from xs to xl. The base for most editorial groups.
Hanken Grotesk variable sans, bound to --font-hanken. The display face for Heading, Hero, Footer and Quote, pulled in by many blocks and by components such as Magazine Cover.
Section heading in the display face, Hanken Grotesk through the --font-display variable, at four sizes that step up with the Section container. Renders an h2 by default; the tag can be swapped.
Searchable help card that filters question and answer text as you type, announces the result count, and offers clear-search and support actions when nothing matches.
Hero section parts: a full-height container-query frame, an absolute background layer for scenes, stack or split inner layouts, a display headline in three sizes, description, actions and media slot.
Card with a horizontal bar chart ranking five countries by listeners, country names on the axis and values printed at the end of each bar. Client component on recharts 3.8.
Roadmap section with four milestones on a horizontal rule, each with a marker, date, title and line of text. The current milestone carries a Now label.
Hover-triggered preview card on Base UI PreviewCard with trigger and a positioned popover-styled panel. Placement defaults to below the trigger, centred, with a short zoom and fade.