Components, blocks and original art for shadcn: rich surfaces, quiet motion, and orbs. A free library under MIT, with full access to the rest.
Offices section: a heading and visiting note above four city entries, each marked by a thin left rule with a primary accent at the title, and a street address set in an address element.
Process section in Instrument Serif: an eyebrow beside a long statement heading, a rule, then three numbered steps (Install, Compose, Deploy), each with a short list.
Bordered accordion on Base UI with item, trigger and animated content panel. Open items take a muted tint, and the caret flips between down and up as a panel expands.
Workspace activity card built on ActivityFeedCard: a large event count, a timeline of deploys, merges and comments with one highlighted event, a 48-hour summary row and a full-width View all link.
Activity card with a large display count, a Timeline of actor, action and target events with times and optional comments, featured dots in the art accent, and an optional period summary footer.
A focus-goal card with a 13-day recharts bar chart of minutes against an adjustable goal line, stepper buttons, a met count and a Set goal button that announces the saved value.
Goal card with a large adjustable target, minus and plus buttons, and a recharts bar chart where entries that meet the goal fill in the art accent above a dashed line. Requires recharts 3.8.0.
Inline status callout with title, description and an optional top-right action slot. Default and destructive variants; a leading icon moves the text into a second column.
Modal confirmation dialog on Base UI with blurred overlay, header, optional media circle, title, description and footer. Action and Cancel render as Buttons; a small size sets them side by side in two equal columns.
FAQ with an intro column holding the heading and a support link, beside an always-open list of six questions and answers. No accordion; every answer is visible.
News pill link built on the secondary Badge, with a headline that truncates first and a Learn more action set off by a short vertical Separator. Renders an anchor through Base UI useRender.
Vertical timeline as an ordered list: a ring-and-dot indicator or custom mark per item, a 1px rail joining them, title, description and small label. CSS variables tune dot size and alignment.
Ring of light in three looks: a soft conic fade, an outline with a faint track and bright stroke, and a short traveling highlight. ArcLayer groups positioned arcs; spin is opt-in and stops for reduced motion.
Plain wrapper that holds its children to a numeric width-to-height ratio through a CSS variable and the native aspect-ratio property. No client JavaScript or primitive library.
File attachment chip with media, title, description and action slots, in three sizes and horizontal or vertical layout. Upload states show a dashed idle edge, a shimmering title and an error tint.
Dense security audit log in a card: one timeline row per event with the actor in bold, a right-aligned time and a muted Geist Mono line of IP, key or device detail, plus an Export button.
Round avatar on Base UI with image, fallback initials and a corner status badge, in small, default and large sizes. AvatarGroup overlaps faces with a ring and adds a remaining-count circle.
Small pill label in default, secondary, destructive, outline, ghost and link variants. Built on Base UI useRender so it can render as a link; the filled and outline variants tint on hover only as anchors.
Dismissible announcement bar with start and centered variants, a background slot for art, a link that becomes a full-bar tap target on phones, and a dismiss button that hands focus onward.
Destructive-tinted alert bar with a faint red ground, red text and a bottom border, carrying a billing warning, an update link and dismiss. The tint deepens in dark mode.
Guides list with a left-aligned header over full-width rows. Each row pairs cover art with a date, category tag, linked title, longer excerpt and author line.
Two-column blog layout with one large featured post beside a divided list of three dated posts. Text only, no images, with a long excerpt on the featured story.
Breadcrumb trail of list, item, link, current page, caret separator and ellipsis parts. The link part uses Base UI useRender, so a framework router link can stand in for the anchor.
Chat bubble with group, content and reactions parts. Variants cover primary, secondary, muted, a primary-tinted fill, outline, ghost and destructive; bubbles align to the start or end.
Base UI button with default, outline, secondary, ghost, destructive and link variants. Sizes run from xs to lg plus four square icon sizes, with focus ring and invalid states included.
Joins buttons, inputs and select triggers into one segmented control by squaring inner corners and collapsing shared borders. Horizontal or vertical, with a text cell and a Separator part.
Date picker grid built on react-day-picker with Button-styled navigation, phosphor caret icons and single or range selection styling. Supports dropdown captions, week numbers and RTL arrows.
Rounded surface with header, title, description, action, content and footer slots. A small size tightens the spacing, and an image placed first bleeds to the card's rounded top edge.
Slide carousel built on embla-carousel-react with content, item, previous and next parts. Horizontal or vertical axis, arrow-key navigation, plugin support and a hook that exposes the embla API.
Centred minimal footer: one row of five links, Threads, Mastodon and Discord icon links beneath, and a copyright line. Built on the Footer parts.
Release changelog on a timeline: each entry opens with a mono version and date, a Latest badge on the newest, a summary line, and New, Improved or Fixed badges against each change.
Changelog layout with an eyebrow, heading and description beside rows of releases. Each row shows a version label and date, then a title and a note.
Recharts 3.8.0 wrapper with a responsive container, config-driven light and dark series colors, and tooltip and legend content. Tooltip values use the mono font, so it installs Geist Mono.
Fenced code surface for chat replies, pinned dark in both modes, with a language label and copy button. Lazy-loads Shiki for highlighting and waits until a streamed fence closes.
Chat message form with an auto-growing textarea that stops at a fixed height and scrolls, and a send button that turns into stop while a reply streams. Enter sends, Shift+Enter adds a line.
Scrolling chat transcript built on Message Scroller: a polite live log that follows the streaming edge, with turn, attribution, pulsing cursor and shimmering status parts.
Conversation history sidebar with a New conversation button, a search field and a list whose rows rename inline or delete from a dropdown menu. Shows an empty state when nothing matches.
A single chat turn: the user's message in a muted bubble aligned to the end, the assistant's as bare text at the start. Built on Message and Bubble.
Renders an assistant's streamed text, splitting fenced code into Chat Code Blocks and setting inline backtick code in mono, with a slot for a cursor at the end.
Base UI checkbox with a filled primary checked state, check icon indicator and an enlarged invisible hit area. Includes focus ring, disabled and invalid styling and works inside Field labels.
Four-step checkout card (cart, shipping, payment, review) with numbered, clickable step triggers that turn to checks. Each step validates with react-hook-form and zod before Continue.
Bars twin of Checkout: the same four steps validated with react-hook-form and zod, but progress is a row of rail segments with screen-reader titles instead of numbered triggers.
Base UI slider dressed as the Cloud Dancer pill: a teal-shaded off-white strip with a dark filled range and a dark orb thumb. Takes one value or a range, with a label per thumb.
A Base UI switch with a cream pill groove shaded teal that warms to rose when checked, and a dark void orb for a thumb. Default and small sizes, client component.
Paper-white shapes lit with a two-color crescent shadow, in fourteen geometries from circle and pill to egg, arch and shield. Pinned to a daylight look; shading deepens on dark grounds.
Vertical column of three paper circles that take their color in turn from top to bottom while the others rest in grey. Height sets the size; reduced motion fades instead of scaling.
Unstyled Base UI collapsible with root, trigger and content panel parts. It adds only slot attributes, so the open and closed look is left entirely to the consumer.
Searchable select on Base UI with an InputGroup field, trigger and clear buttons, grouped list, empty state and check indicators. A chips mode adds removable chips for multiple selection.