50 blocks · 6 categories · React (Next.js)
Two-pane analytics dashboard: stacked bar with dot overlay on a dual y-axis above, and an interactive drill-down line chart below. Click a bar to filter the bottom pane to that route.
1 dep
Header-grade search/command palette. Bundles the slim trigger button (with platform-aware ⌘K/Ctrl-K kbd hint) AND the modal CommandDialog into one block; consumers drop it once and the global keyboard shortcut wires itself. Takes a `groups` array of `{ heading, items: [{ label, hint, icon, onSelect }] }` and calls `onSelect`. `showTrigger={false}` hides the inline button so the consumer can control open state from elsewhere.
2 deps
Horizontal conversion funnel with count strip above the SmoothFunnel chart and a stage-name + retention-from-previous footer below. Works for hiring (applied → hired), e-commerce (sessions → purchases), onboarding (signed up → activated). 3-6 stages. Theme-aware via OKLCH chart tokens.
1 dep
Three-panel spend dashboard. Stacked weekly bar chart over time on top, plus two side-by-side categorical pies below (share by lane / share by carrier). Theme-aware via registry tokens.
2 deps
Full dashboard shell — collapsible sidebar + sticky topbar (sidebar trigger, breadcrumb, theme switch, notifications) + main content children. Drop it around a page: `<DashboardLayout>{page}</DashboardLayout>`.
6 deps
Month-view event calendar with stats strip, drag/shift range select, side rail (selected day or range summary), upcoming list, and per-cell/per-event context menus. events / onEventsChange binds the source of truth; eventTypes config maps each type key to its label/icon/color theme so swapping the visual palette is one prop. Built on the use-month-grid headless hook.
9 deps
List of upcoming events in a SectionCard. Each item shows title + date + optional status badge.
3 deps
Full kanban surface: 4 status columns, drag-and-drop card movement with insertion indicator, board/list view toggle, search + priority + assignee filters, collapsible columns, click-to-open task detail Sheet (comments, subtasks, files), full-form Add Task Dialog with priority/assignee/due-date/tags/subtasks. Mega-block: ships 14 Vue files (KanbanBoard + 6 kanban-* views + 7 small badges/lists). Bind with v-model:columns; consumer owns the columns array so swapping the in-memory store for Drizzle/Postgres is a one-line change. Auto-pulls the use-kanban hook (types + configs + helpers) and kanban-data lib (seed columns).
20 deps
Six-tile KPI status grid. Each tile pairs a stat header (count / percentage) with a small pie or horizontal bar chart that breaks the metric down. Different tiles use different chart types so each KPI reads at a glance.
2 deps
Header-grade notifications panel. Slot-trigger Popover the consumer wraps around their own Bell button. Filter tabs (All/Unread), Today/Earlier groups, category-coloured accent bars, hover-dismiss, mark-all-read, slide-in animation. Slot receives `unreadCount` so the trigger can show a badge.
3 deps
Header-grade profile/account dropdown. Slot-trigger DropdownMenu the consumer wraps around their own avatar button (default trigger ships an Avatar fallback). Sections: upgrade, account/billing/notifications/settings, log out. Emits `select` with the chosen item key so consumers wire navigation and auth themselves.
2 deps
Labeled progress bars in a SectionCard. Each bar cycles through chart-1..5 colors.
2 deps
Vertical list of clickable shortcuts in a SectionCard. Pass linkComponent (Next.js Link or your router Link) for SPA routing.
2 deps
Compact theme customization popover. Light/Dark/System mode (via next-themes), six curated color presets that overwrite `--primary` / `--primary-foreground` / `--ring`, and a radius slider bound to `--radius`. Persists to localStorage and exposes a one-click Copy CSS for the active token set.
4 deps
List of toggle-able settings in a SectionCard. The `value` prop binds a Record<string, boolean> keyed by item.key; `onValueChange` emits the next record.
1 dep
ChatGPT/Claude-style LLM chat surface. Collapsible left sidebar with New chat, searchable thread history grouped Today/Yesterday/Previous 7 days/Earlier, account row. Centered conversation: empty state with suggested-prompt tiles, user/assistant turns with code-block rendering and copy/regenerate/feedback actions, streaming dots, stop button. Composer with model picker (Opus/Sonnet/Haiku), attach, Enter-to-send, autosizing textarea. Stateful demo — wire `send()` to your streaming endpoint.
2 deps
Single-pane conversation surface. Peer header (avatar + online dot + call/video/more), grouped messages with day separators (Today/Yesterday/date), own vs. peer bubbles, read/delivered/sent ticks, typing indicator, composer with attach/emoji and Enter-to-send. Stateful demo; swap the `messages` ref for your transport.
3 deps
Two-pane messaging surface. Left rail: searchable conversation list with avatars, online dots, pinned section, unread badges, mute icons, last-message preview, smart timestamps. Right pane: active thread with day separators, own/peer bubbles, read ticks, typing indicator, attach/emoji/send composer. Stateful demo — replace `conversations` and `messagesByConvo` with your data layer.
4 deps
Three-pane mail surface. Left rail: Compose button, folders (Inbox/Starred/Sent/Drafts/Spam/Trash) with unread counts, colour-coded labels with totals. Middle: searchable message list with sender, subject, preview, labels, attachment glyphs, star toggle, smart timestamps. Right: reader pane with subject, from/to, body, attachment chip, reply/forward/archive actions. Stateful demo — swap `mails` for your data source.
3 deps
Two-step verification surface. 6-digit OTP pin input auto-submits on entry, shows verifying state and an inline error on mismatch, has a 30-second resend cooldown, and swaps to a Verified card with a Continue button on success. Emits `verify` (code), `resend`, and `continue`. `demoCode` prop controls the value the built-in mock validator accepts.
3 deps
Four-stage password reset surface in a single card: request (email form) -> sent (check-your-inbox confirmation with "Open reset form" demo button) -> reset (new password + confirm with match validation) -> done (success confirmation linking back to sign-in). Emits `request` (email) when the link is asked for and `reset` (password) when the new password is set; consumer wires the actual mail/db calls.
4 deps
Full-page sign-in surface. Email + password + remember-me form, forgot-password and sign-up links, optional GitHub/Google OAuth row. Emits `submit` with the form payload and `oauth` with the chosen provider; consumer wires the actual auth call. Link targets are configurable via props.
6 deps
Full-page sign-up surface. Name/email/password/confirm form with password-match validation, T&C acceptance gate, optional OAuth row, link back to sign-in. Emits `submit` with the validated payload and `oauth` with provider; consumer wires the actual auth call.
6 deps
Centered login card. Email + password fields with a "Forgot password?" link, primary submit, then a divider and a 2-button SSO row (Google + GitHub). Footer links to sign-up. Emits submit, forgot-password, sign-up, and oauth events for the consuming app to wire.
5 deps
Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.
4 deps
Centered sign-up card. Name + email + password + confirm with inline mismatch warning, terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub). Footer links back to sign-in. Emits submit, sign-in, oauth, view-terms, view-privacy.
6 deps
Four-tile bento grid (4 cols × 2 rows on lg). One large 2×2 hero tile with a mini progress + stats illustration; one wide 2×1 secondary tile; two square 1×1 tiles (a big-number setup-time stat and a compliance line). Each tile is a raw Card with the content spelled out inline — swap any one without affecting the others.
2 deps
Two-column contact section. Left column has eyebrow, headline, lede, three icon-prefixed contact rows (email / phone / office), and a map placeholder. Right column is a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state after submit. Emits "submit" with the form payload.
6 deps
Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email / phone / office) and a live Mapbox map pinned to your office (pass access-token + location; falls back to a placeholder without a token). Right: a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state. Emits "submit" with the payload.
7 deps
Centered call-to-action section. Soft gradient backdrop, large headline, supporting copy, primary + outline buttons, and a fine-print line for trial / cancel terms.
1 dep
Single-column FAQ section. Eyebrow + headline + email-CTA lede, then six accordion items (trial / migration / security / pricing / support / cancel). Uses Accordion in single-collapsible mode so only one answer expands at a time. Questions are spelled out inline so consumers can rewrite them directly.
1 dep
Three-column features grid (six cards). Eyebrow + headline + lede, then each card has a tinted icon-box, a short title, and a one-paragraph description. Cards are spelled out inline — swap, reorder, or change icons without unwiring a wrapper.
1 dep
Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.
3 deps
Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, "Sign in" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.
2 deps
Two-column hero with badge eyebrow, large headline, supporting copy, primary + outline CTAs, social proof row, and a collage of three rotated KPI cards (active users / uptime / onboarding queue) on the right.
4 deps
Customer-logo cloud strip. "Trusted by teams at" eyebrow over a responsive grid of six grayscale wordmarks (2 / 3 / 6 columns by breakpoint). Each logo is an inline SVG sitting on currentColor so the muted-foreground → foreground hover swap works. Ships with placeholder marks — swap the SVGs with real customer logos before shipping.
Single-row infinite marquee of customer logos. Track is duplicated and translated -50% on a 30s linear loop for a seamless seam; edges fade out via CSS mask-image; pauses on hover; respects prefers-reduced-motion.
Three-row logo marquee with alternating scroll directions and slightly different speeds (32s left, 26s right, 38s left) so the eye does not lock onto a single rhythm. Edges fade out via CSS mask-image; the whole section pauses on hover; respects prefers-reduced-motion.
Three-tier pricing table (Starter / Team / Enterprise) with a monthly/yearly ToggleGroup that flips prices live. Middle tier is highlighted with a ring + "Most popular" badge. Each tier spells out its bullet list inline so consumers can edit any line directly.
4 deps
Centered single-card testimonial carousel. Quote icon, large pull-quote, avatar with initials, name + role + company line. Pip row underneath flips between three testimonials with an animated active pill.
2 deps
Three-step checkout (cart → payment → confirm) with animated step transitions, an inline PaymentForm, a success screen that fires a confetti burst with an animated checkmark, and an error screen with retry. Async submit is forwarded to the consumer-provided `onSubmit`, which returns an `orderId` that ends up on the success screen.
7 deps
Credit-card checkout form with a live 3D card preview, wallet shortcut buttons (Apple Pay / Google Pay / PayPal), brand auto-detection, Luhn validation, expiry / CVC checks, and a hookable async submit. Wallet buttons call `onWallet` so the consumer wires the actual SDK; the card form calls `onSuccess` / `onError` after the consumer-provided `onSubmit` settles.
4 deps
List of stored payment cards using compact 3D card visuals. Marks one as the default, allows setting a different one as default, removing with a confirmation dialog, and adding a new card via an inline PaymentForm that collapses open. Emits `add`, `remove`, and `set-default` — consumer owns the persistence.
5 deps