Copy production-ready React + Tailwind components inspired by the best SaaS apps. Stop searching. Start building.
26 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.
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 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 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 Linear-style issue card with priority indicators, status icons, assignee avatars, labels, and keyboard selection. Perfect for project management and task tracking interfaces.
A scrollable activity feed inspired by Linear and Slack. Shows user actions with avatars, relative timestamps, loading skeletons, and realistic team activity.
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 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 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.