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
Hour, minute and optional second scroll columns with 12/24h modes, step intervals and keyboard nav.
Pick a meeting time: a calendar where days without free slots are disabled, beside the times for the chosen day. Booked slots show crossed out, and arrow keys skip over them.
Shows a tool the model called: its name, a status from pending to done, the input and output as formatted JSON, and errors. Calls that need a human get Allow and Deny buttons and stay open until answered.
Onboarding spotlight that dims the page around a target element and walks users through steps with a positioned coach-mark card.
Collapsible nested tree for file explorers and hierarchical data, with auto folder/file icons, depth indentation, selection and keyboard focus.
Three-step 2FA enrollment card: scan a real otpauth QR or copy the key, confirm a six-digit code, then save recovery codes with copy, download and a checkbox-gated finish. Ships composable parts.
Unsaved-changes guard: a root provider plus a useUnsavedGuard hook. Warns before reload, tab close and in-app link navigation, and returns a guard(proceed) to wrap programmatic navigation in a confirm dialog.
Uploads files a few at a time with progress for each and overall, plus cancel, retry and clear finished. useUploadQueue takes your upload function, so it works with S3, a signed URL or your own API, and pairs with File Dropzone.
Metered usage panel with per-resource progress bars that tint amber near the limit and red over it. Ships composable parts.
Premium fintech landing page for a stablecoin: a full-bleed video hero with a custom halo wordmark and an infinite brand marquee, a meet-the-product card grid, a backers marquee, and a use-modes split with an autoplaying video panel, closing on a dark anchor footer. Self-contained light palette.
A value that is controlled through a prop or kept internally, with one setter that updates either and reports the change. The pattern behind value and defaultValue.
Copies text and reports copied for a moment, so a copy button can swap to a check mark. Returns false instead of throwing when the browser refuses.
useDebouncedValue holds a value back until it stops changing, for search as you type. useDebouncedCallback returns a stable function with cancel and flush, for autosave.
Live match for any CSS media query, like a breakpoint, dark mode or a touch screen. Renders a fixed value on the server so hydration never mismatches, then follows the real match.
Live prefers-reduced-motion match without an animation library. Renders false on the server, so hydration never mismatches, and updates when the setting changes.
Dark, premium landing page for an electric RV brand: a full-screen video hero with liquid-glass navigation, a centered tagline, a split feature card with switchable tabs, an HLS streaming statement with a stats row, a video preorder call to action and a multi-column footer. Self-contained pure-black palette, Inter + Instrument Serif type.
Composable video player with click or Space to play, scrub-safe seek with buffered tint, time readouts, volume, full screen, and controls that fade out while it plays.
A list that renders only the rows in view, so thousands of items scroll smoothly. Rows can be any height and are measured as they render, and it asks for the next page as the reader nears the end, with a loading row and an empty state.
Virtual-machine instance table with live status dots, size, region, IP and uptime. Self-contained parts, no table primitive required.
Editable code field with dependency-free YAML syntax highlighting, a line-number gutter and tab-to-indent. Controlled or uncontrolled.
Decade-grid year picker with keyboard nav, min/max bounds, single or range mode.