A collection of shadcn/ui components, blocks and page templates for building modern, fast and beautiful websites. Built on Radix UI and Base UI. Works with the shadcn CLI and any preset, in light, dark and RTL
Category page with a sticky filter sidebar (category counts that react to the other filters, price range, colour, stock, rating), removable filter chips, sorting, an empty state, and a filter sheet on small screens.
Emerald accent preset for the hirael palette. Sets --primary, --primary-foreground and --ring for light and dark.
Emoji picker on frimousse: the full emoji set by category, search, skin tones, keyboard navigation and a hover preview.
A first-run projects panel. Create a project with a validated name or import a GitHub repo, and the list replaces the empty state.
A customer list with search and plan and status filters. When nothing matches, it repeats the query, says how many matches the filters hide, suggests close matches and offers to clear filters.
A deployments panel that failed to load, with a copyable error reference and a support link. Try again shows loading rows, fails once more, then loads the data.
A members panel with an invite form inside the empty state. Invites are validated and listed as pending, and revoking the last one brings the empty state back.
Environment variables editor with masked secrets, copy, per-environment chips, .env import, key validation, and unsaved-change tracking. Ships composable parts.
500 page with a retry action, home link, collapsible technical details (request id, timestamp, copy button) and a system status line. Ships composable parts.
Two-column FAQ: sticky heading and a hairline help note on the start side, numbered accordion on the end side.
Centered heading with two-column accordion grid below. Each row tagged with a Qn index.
Searchable FAQ with category tabs, a live-filtered accordion, an empty state for missed queries and a support CTA strip.
Framed single-column FAQ with side rules, a centered display header with a topic jump nav, five topic groups each pairing a heading with its own accordion, and a support footer line.
Two-column FAQ block: an eyebrow, serif headline and short intro sit on the start side; a single-open accordion of five questions sits on the end side, split by a vertical divider that collapses to a stacked layout on mobile.
Centered FAQ with a pill badge, a word-by-word headline reveal and a short intro above a multi-open accordion where each question is its own bordered card that rises in with a staggered delay and tints slightly when open. Ships composable parts.
Split FAQ: a heading, lead and numbered topic index on the start side; picking a topic opens its answer in the single-open accordion on the end side.
One bordered card of stacked stripes: a centered intro, three alternating rows pairing an indexed layer with a small deploys, previews or release-rules mockup, then a three-column primitives row and a pair of link calls to action.
Centered header above a six-item list of what every catalog item includes, laid out on hairline rows with a tabular index kicker.
Bento explaining install: a lead tile with the shadcn add command and the files it writes, beside five indexed tiles on dependencies, aliases, npm packages, tokens and runtime.
Services grid: a pill badge, title and intro over a three-column set of cards, each with a large thin icon, title, blurb and a three-point bullet list, lit by a static primary radial glow. Cards rise in with a staggered CSS entrance.
Values section: a centered header over a two-column, offset grid of six glass cards, each backed by a static dot pattern in the primary color, rising in with a staggered CSS entrance.
About section: a centered animated header over two equal story cards, each decorated with a fading SVG grid pattern and a token-lit gradient, with a heading and two paragraphs that rise in after the card. Reduced-motion renders everything in place.
Problem-framing trio: a badge and serif headline with a muted second half above three cards, each an orb icon in concentric rings with a soft radial glow, a title and a short description. Cards fade up in sequence, stilled under reduced motion.
Six-card feature grid on hairline rails: each card carries an inline icon beside its title, a title and a description, corner crosshair marks, and a radial spotlight that follows the pointer on hover. Warm-tinted top glow per card.
Selectable catalog bento on a hairline grid: step cells with a large faded icon, title and description; picking one shows its sample settings in a panel below. Crosshair frames clip at the cell edge.
Mixed-cell overview bento: a quote with attribution, two metric tiles, a latest-drop card with a CardAction, and a three-job list, all on one hairline lattice.
Feature switcher for a shared inbox: a vertical tab list of three capabilities beside a panel previewing each one, from assigned conversations to saved replies and snooze times. Arrow keys move between tabs and the panel follows.
A file as a row for lists or a tile for grids: an icon picked from the type, or an image preview, with the name, size and your own actions. FileIcon and fileKindOf are exported for your own layouts.
Drag-and-drop or click upload zone on react-dropzone, with a file list, type and size validation, and readable rejection messages.
A Linear-style filter bar for lists and tables: pick a field, then an option, and get a chip with an operator menu and a value editor. Handles options, multi-select, text, number ranges and date ranges, keeps every filter in one array you can save to the URL, and ships applyFilters for client-side lists.
Expanding speed-dial FAB: a primary trigger that rotates open to stagger a stack of secondary actions on any side. Compound API.
Floating pill toolbar for text selection and canvas actions, with toggle buttons, separators and labels. Position it anywhere.
Brand + tagline column alongside Product / Company / Resources link columns, with a copyright row and social icons below a thin rule.
Rounded-top footer with a brand block beside a multi-column link grid. Each column caps at five links and shows a "View all" arrow when there are more. A soft radial tint sits behind the top edge, and a bottom meta row carries the copyright and secondary links.
Boxed link-column footer: a two-column brand block with wordmark, blurb, and ghost social buttons, two link columns, and a divided copyright row. Sits in a soft outlined panel.
Four-column footer lit by slow light rays falling from the top edge: brand mark and blurb, a contact column with WhatsApp and email links, a location column, and a subscribe form whose placeholder cycles through prompts. Columns and links rise in with staggered motion; a divided copyright row closes it. Rays hold still under reduced-motion.
Floating card footer inset from the page edge: a brand block with mark and tagline, three link columns, and a hairline-divided legal row with copyright and a sign-off line.
Two-part footer: a bordered CTA panel over a rotated, blurred image with a headline, sub-copy and a wide sign-up button, above a brand block with social icons, two link columns and a hairline copyright row.
Centered reset request: one email field with inline validation, then a check-your-email state that echoes the address, links back to sign in and offers a resend.
Human-readable file sizes in binary steps, such as 1.5 KB or 12.0 MB, for upload lists and storage meters.
Radial SVG gauge for a single reading on a scale, with threshold bands that recolour the arc, an animated sweep and a centred value and caption. Any start and end angle, from a half circle to a full ring.
Sticky top nav with brand monogram, centered anchor links, dual auth CTAs and a slide-down mobile menu.
Floating nav that runs full width at the top of the page and shrinks into a blurred pill once you scroll past 100px, with a spring-animated width change. Links share a sliding hover highlight; on mobile a toggle opens an animated dropdown menu. Ships composable parts and a scroll-container prop for embedded layouts.
Sticky marketing header with Product, Solutions and Resources mega menus, each a two-column link list beside a featured entry, plain Pricing and Docs links, and a side sheet with collapsible groups on small screens.
Full-bleed hero card over an animated light-beam shader, with a glass pill nav, a trust badge, a serif headline, dual CTA and a three-stat footer.
Centered hero over animated gradient bars, with a release pill, a serif headline with an underlined accent, dual CTA and a wordmark strip.
Editorial centered hero on a faded grid, with a serif headline, sub-copy, dual CTA and a logo cloud of customer wordmarks.
Full-bleed image-banner hero with a dark scrim, a slim nav, a serif headline and dual CTA aligned to the bottom.