Copy production-ready React + Tailwind components inspired by the best SaaS apps. Stop searching. Start building.
42 patterns · More coming soon
A keyboard-driven command palette with fuzzy search, arrow key navigation, and shortcut badges. Inspired by Linear's Cmd+K interface.
A global search palette that groups results by type — Issues, Docs, People — with sticky section headers, colored icon tints, and arrow-key navigation across groups. Inspired by Linear's search.
A launcher-style search palette that shows Recent and Suggested sections on focus, then transitions into a flat filtered list as the user types. Arrow keys move across all visible items. Inspired by Raycast.
A query builder with stacked filter rows — each row chooses a field, operator, and value — combined by a global AND/OR toggle. Includes per-row remove, an Add filter button, and an empty state. Inspired by Linear's view filters.
A collapsible sidebar navigation inspired by Linear. Includes grouped nav items, active states, count badges, and smooth collapse animation.
A recursive folder tree with expand/collapse chevrons, nested indentation, active highlight, and per-row hover affordance. Folders toggle on click; pages select on click. Inspired by Notion's sidebar.
A horizontal tab bar that always keeps the active tab visible — tabs that don't fit collapse into a More menu, and an overflow tab swaps into the visible row when activated. Inspired by Vercel's project dashboard.
A breadcrumb trail where each non-terminal segment opens a dropdown of sibling items — switch workspace, project, or view from anywhere in the trail without leaving the page. Last segment is the current page. Inspired by Linear.
A workspace-switcher pill that opens a dropdown of all workspaces — colored avatars with initials, member counts, an active-workspace checkmark, and a dashed Create workspace action below a divider. Inspired by Slack.
A Vercel-style deployment card showing build status, commit info, and animated building states. Essential for any developer tool or CI/CD dashboard.
A flexible empty state component inspired by Vercel. Handles zero-data scenarios with clear messaging and actionable next steps.
An error/failed-load state inspired by Notion. Shows a typed icon, title, description, and a primary retry button with a loading state. Drop-in sibling to the Empty State pattern.
A floating command menu triggered by '/' inspired by Notion. Features grouped commands, fuzzy search, keyboard navigation, and smooth positioning.
A flexible metrics dashboard component inspired by Vercel. Shows key numbers with trend indicators, loading skeletons, and responsive column layouts.
A hero metric card with a large tabular-numerals value, a trend pill that flips to red on negative deltas, a comparison label, and an inline SVG sparkline whose stroke and fill follow the trend direction. Inspired by Stripe.
A stacked quota panel showing current vs. limit for multiple resources. Progress bars shift from green to amber to red as usage approaches the limit, with an optional upgrade prompt at near-limit thresholds.
A shimmer skeleton placeholder for a grid of metric cards. Each card pulses with Tailwind's built-in animate-pulse, mimicking the real layout — label line, value, chart area, trend line — so the transition to loaded content feels seamless.
A GitHub-style calendar heatmap of daily contribution counts. Cells are colored across a 5-level intensity scale, grouped into 53 weeks with month labels and day-of-week labels. Hover any cell for a tooltip showing the exact date and count.
A grid of compact metric cards, each with a label, bold value, an inline SVG sparkline, and a color-coded trend delta pill. The sparkline stroke and fill flip between green (up) and red (down) based on the delta sign. No chart library needed.
A centered modal with backdrop, title, description, and Cancel/Confirm actions. Supports a destructive variant with a red Confirm button and warning icon. Esc-to-dismiss and backdrop-click both close the dialog. Inspired by Linear.
A right-anchored slide-over with backdrop, sticky header (title + subtitle + close), scrollable body, and an optional footer for action buttons. Smooth slide + fade transitions; Esc-to-dismiss; controlled via open/onClose. Inspired by Stripe's customer detail drawer.
A mobile-style bottom sheet that slides up from the bottom edge over a backdrop. A drag-handle bar sits at the top, followed by a title, scrollable content, and action buttons. Backdrop click, the close button, or Esc dismisses it.
A bottom-right toast stack with success / error / info variants, optional action links, manual dismiss, and a per-toast progress bar that auto-dismisses on timeout. Smooth slide-in transitions; pass duration: 0 to keep a toast persistent. Inspired by Vercel.
A bell-triggered notification panel with an unread count badge, All / Unread tabs, and a list of notifications with avatar initials, title, body, timestamp, and unread dot. Click any notification to mark it read; Mark all read clears the badge. Closes on outside click.
A Linear-style issue card with priority indicators, status icons, assignee avatars, labels, and keyboard selection. Perfect for project management and task tracking interfaces.
A checklist of subtasks under a parent task. Checking an item strikes through the label and updates a thin progress bar plus an 'X of Y' counter. An inline add-subtask row sits at the bottom.
A multi-column kanban board with issue cards showing title, labels, assignee avatar, and priority indicator. Cards support HTML5 drag-and-drop reordering within and across columns, with an 'Add card' affordance per column.
A scrollable activity feed inspired by Linear and Slack. Shows user actions with avatars, relative timestamps, loading skeletons, and realistic team activity.
A threaded comment component inspired by Linear. Supports nested replies, emoji reactions, and a keyboard-friendly composer. Drop it into any issue, PR, or task view.
A vertical event timeline inspired by Vercel. Shows system and user actions with typed icons, actor avatars, and day grouping. Perfect for settings pages and admin dashboards.
An inline-editable properties panel inspired by Notion and Linear. Supports text, select, multiselect, date, person, status and more property types — all editable inline.
A 3-step onboarding wizard with a stepper indicator (active / completed / pending), per-step validation that gates Next, Back navigation, a final review step with a terms checkbox, and a success state on submit. Plain useState — no form library required. Inspired by Stripe.
A keyboard-navigable multi-select input inspired by Linear. Selected tags render as removable chips; typing filters options; backspace removes the last tag; create new tags inline.
A settings-style panel of animated toggle switches, grouped under labeled sections. Each row has a label and optional description. The thumb slides smoothly on toggle. Fully accessible: role='switch', aria-checked, keyboard-toggled with Space and Enter.
A drag-and-drop file upload zone with a dashed border, drag-over highlight, and a file list showing name, size, a progress bar, and status icon. Progress is simulated automatically. Supports click-to-browse via a hidden file input.
A fully interactive data table with sortable columns, selectable rows, bulk actions, badge cells, and loading skeletons. Inspired by Notion and Linear's clean table aesthetic.
A table-footer pagination bar with ellipsis page ranges (1 … 4 5 6 … 20), prev/next buttons that disable at bounds, a live X–Y of Z range readout, and a rows-per-page selector that opens upward. All state is internal — just pass totalItems. Inspired by Vercel.
A dense data table with sortable column headers (click to sort asc/desc with an indigo caret), per-row checkboxes, a header select-all that goes indeterminate when partially selected, and a bulk-action bar that appears on selection. Status and priority badges are inlined via token records. Inspired by Linear.
A data table where clicking a row opens a slide-over detail drawer from the right. The selected row highlights with an indigo left border. The drawer shows full row details with a header, scrollable field list, and close button. Backdrop click dismisses.
A data table where clicking a cell turns it into an editable input or select dropdown depending on column type. Enter commits, Esc cancels, and blur commits text edits. Status-style select cells use a floating dropdown that flips upward for rows near the bottom of the table.
A tokenized status-badge system — one Status type, one TOKENS record, two sizes (sm/md) and two variants (dot/icon). Adding a new status only requires extending the token record, not editing the component. Inspired by Linear.
A radiogroup-style segmented control with a sliding indicator behind the active option. Keyboard navigable (←/→/↑/↓ to step, Home/End to jump). Equal-width segments via flex-1; indicator position computed from activeIdx so any segment count works. Inspired by Notion.