@minidev

Accessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.

React onboarding card that shows account setup as completed steps out of a total, with a labelled progress bar and a hint for the next step to finish.

React activity feed that lists who did what and when, with initials avatars, muted action text and tabular timestamps in a single bordered card.

Compact payment form for card number, expiry and CVC with correct autocomplete hints, numeric input mode and a full width save button. Ready for your processor.

Responsive Tailwind row of admin KPI tiles, each with a label, a large tabular value and an optional up or down delta. Collapses from four columns to one.

User management row with avatar, online status dot, name, email, a role chip for admin, write or read access, and an accessible actions menu button.

React timeline of an AI agent run: each tool step shows pending, running, done or error, reports its duration and folds out details. The header sums up the run.

Chat input for AI apps with a multiline textarea, Enter to send, suggestion chips, attach button, model picker and a stop button while a response streams.

Shadcn style alert dialog on Base UI for confirmations that need an explicit answer. Modal backdrop, focus trap, title, description and an actions row.

Slim site-wide announcement bar for launches, promos or notices. Centered content, a polite status role for screen readers and an optional dismiss button.

React settings panel listing API keys with masked previews, created date badges and a rotate button per key, plus a header action to create a new key.

Tailwind app shell layout with a fixed width sidebar slot, a topbar slot and a scrolling main area. The sidebar hides below the md breakpoint for mobile.

React request card for approval workflows showing the requester avatar, title and summary, with Reject and Approve buttons wired to your callbacks.

Dependency free SVG area chart for React with a smoothed line, dashed grid, gradient fill and an optional highlighted point. Strokes stay crisp at any size.

Framed preview for AI generated artifacts such as code, documents or UI, with a title bar, copy button and optional expand action for a full view.

Shadcn compatible aspect ratio wrapper that locks media to a ratio such as 16:9 or 1:1 using CSS aspect-ratio, with overflow clipped for images and video.

Assignee picker for tasks and tickets: a listbox of people with initials avatars, where the selected person is highlighted and choices report their id.

Compact Tailwind file chip with a paperclip icon, truncated filename and an optional remove button, for attachments in chat composers, emails and forms.

Minimal React audio player row with a play and pause toggle, title, subtitle and an accessible progress bar. Controlled, so it works with any audio source.

A microphone recorder with start, pause and stop, an elapsed timer, live waveform bars, playback with a progress bar and a download button.

Filter toolbar for audit logs combining a search field, actor filter chips for all, admins or system, and a date range picker in one wrapping row.

Single audit log line: actor avatar, actor name, muted action text and the affected target, with a relative timestamp underneath. Stacks into a trail.

Bordered audit trail in React that renders a list of actor, action, target and time records as stacked log entries. Useful for security and admin history pages.

Centered Tailwind sign in card with a title, optional description, a slot for fields and providers, and a divided footer for sign up or reset links.

Text input that filters string options as you type, using ARIA combobox and listbox roles. Works controlled or uncontrolled and lists up to eight matches.

Shown under the name in the tooltip and overflow list.

React profile photo uploader with an avatar preview and an Upload button that opens a hidden image file input. Shows initials until a picture is chosen.

Shadcn compatible avatar on Base UI with image and initials fallback, three sizes, a status badge and an overlapping avatar group with a plus count.

Small back navigation link with a left arrow icon, muted text that darkens on hover and a visible focus ring. Defaults to the label Back and accepts any href.

A back to top button that appears after scrolling, with a ring that fills as the reader progresses. Smooth scroll that respects reduced motion.

Shadcn style badge in seven variants: default, accent, secondary, destructive, outline, ghost and link. Renders as a span or any element, with icon support.

Inline notice banner in accent, warning or danger tones, with a status role, a slot for an action button and an optional dismiss icon on the right.

Lightweight React bar chart with rounded bars, dashed gridlines and labels. Hovering a bar dims the rest and shows its value; the peak is highlighted first.

A responsive bento grid for feature sections: tiles with icon, title, copy and a visual slot on a six column grid that collapses to one column on phones.

Tailwind billing address fieldset with a multiline street field and a responsive row for city, state and postal code. Drops into checkout forms.

Linked Tailwind blog post card with a 16:9 cover image, tag, relative date, title and a two line clamped excerpt. Hover and focus states cover the card.

Ellipsis marker for collapsing the middle of long breadcrumb trails. Decorative and hidden from assistive tech, sized to sit between breadcrumb separators.

Breadcrumb navigation from an items array, with chevron separators, linked ancestors and the current page marked with aria-current. Built with React.

CI pipeline view that shows each stage as a chip with success, running, failed or pending icons, joined by connectors. Status text is exposed to screen readers.

Floating Tailwind selection bar that appears once rows are selected, showing the count, your action buttons and a clear button. Sticks to the bottom edge.

CSV user import panel with a format hint for email, name and role, a CSV-only dropzone and an Import users button that enables once a file is added.

Groups adjacent buttons into one segmented control in Tailwind, joining borders and rounding only the outer corners. Uses role group for toolbars.

Shadcn compatible React button on Base UI with eight variants, nine sizes including icon sizes, a pressed state and render prop support for links.

React agenda list of the day's events with a fixed time column, title and optional meta line such as location or attendees, divided inside one card.

Month calendar grid with weekday headers and clickable day cells that highlight the selected date. A simple Tailwind base for date views and schedulers.

Tailwind callout box in info, success, warning or danger tones with an optional bold title. Uses the note role, which suits docs, forms and setup steps.

Two step subscription cancellation flow: ask for a reason with radio options, then confirm with a destructive button or go back. Tells users what they keep.

Shadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4.

Scroll snap React carousel with previous and next buttons, arrow key support and a labelled region. Shows one, two or three slides by breakpoint, no library.

React shopping cart row with product title, unit price, a quantity stepper and an optional remove button. Callbacks report quantity changes and removals.

Case study card with the company name, a short headline and a large result metric, plus an optional up or down delta. Good for proof sections on landing pages.

Layout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes.

Live React character counter that shows the current count against a limit and turns red when it goes over. Announces changes politely to screen readers.

Card wrapper for charts with a title, optional description and a minimum height body. Pairs with the area, bar and donut charts in a React dashboard.

Wrapping chart legend with small color swatches and labels. Pass colors per series or fall back to accent, success, warning and danger theme tokens.

Tooltip card for charts showing a title and label and value rows with tabular numbers. Drop it into any chart library's custom tooltip slot.

Scrolling chat thread for React that renders user, assistant and system messages as bubbles, auto scrolls to the newest one and uses a live log role.

List of CI check runs with success, failed or running icons, monospaced job names and a status label. Looks like the checks section of a pull request.

Vertical wrapper that groups related checkboxes under role group with even spacing. Use it with Checkbox and labels for multi select settings.

Shadcn style checkbox on Base UI with an animated check, indeterminate state, invalid and disabled styles, and an enlarged hit area for touch.

Tailwind order summary card listing line items and prices, a divided total row and a full width Pay now button. Fits the side column of a checkout.

Single select filter chips in React that behave as a radio group, with an accent ring on the active chip. Good for quick filters above lists and tables.

Selectable React card button with an icon, title and description, using aria-pressed and an accent outline when chosen. Suits plan pickers and onboarding.

Inline citation button for AI answers, with an accent source number and label. Link it to a source panel or popover so users can check references.

Flex layout primitive that wraps children in a row with vertical centering and a numeric gap on the 4px scale. Great for tags, buttons and meta rows.

React code block with zero dependency syntax coloring, a language tag, optional filename and line numbers, and a copy button that confirms Copied.

Editor style frame with a monospaced filename tab and a code area. Wrap snippets, editors or diffs so they read as a file in your React docs or app.

Sidebar with a toggle button on its edge that collapses it to a narrow rail and expands it again. The button label updates for screen readers.

Shadcn compatible collapsible on Base UI: a full width trigger that shows or hides a panel of content. Accessible expanded state and keyboard support.

Swatch color picker with eight OKLCH presets, a ring on the selected swatch and listbox semantics. Works controlled or uncontrolled for theme or label colors.

Columns dropdown for data tables with a checkbox item per column. It returns the updated list of visible column ids so you can show or hide table columns.

Shadcn style combobox: a popover select with a filter input, check mark on the chosen item and an empty message. Built on Base UI popover for React.

Command dialog that opens the command palette in a modal from a list of commands with labels and handlers. Wire it to a Cmd K shortcut in your React app.

Row for command menus with a label, an optional keyboard shortcut in a kbd tag and an active highlight state. Use it to build custom command lists.

Cmd K style command palette in a dialog with a search field that filters commands as you type, runs the chosen action and closes. Shows an empty state.

Comment box with a three row textarea and a Comment button that stays disabled until there is text. Submits the trimmed value and clears the field.

Threaded React comment list with initials avatars, author name, timestamp and body in bordered bubbles. Pairs with the comment composer.

Git commit row for React with author avatar, commit message, relative time, a short SHA badge and a copy button for the hash. Fits deploy logs.

Plan comparison table with features as rows and plans as columns, showing check or dash icons for booleans and text for values. Scrolls on mobile.

Destructive action confirm: a red trigger button opens a dialog with a title, warning text, Cancel and Confirm. Labels are configurable for deletes and resets.

Tailwind settings row for a linked third party account showing the provider and account name, with a Disconnect button. For OAuth and integrations.

Scrollable Tailwind console panel in monospace that prints log, warn and error lines with level labels. Uses a log role and is keyboard focusable.

Responsive page container that centers content with side padding and a max width preset: sm, default, lg or full. The basic wrapper for Tailwind layouts.

Small toggle chip for picking context in AI prompts or filters, with an active accent state and hover styling. Passes through all native button props.

Right click context menu that opens at the cursor with menu items, including destructive items in red. Closes on selection or click outside, in React.

Rounded pill for showing attached context, such as files or pages in an AI prompt, with a truncated label and an optional remove button.

React chat history sidebar with a New chat button and a scrolling list of conversations showing title and relative time. Highlights the active chat.

Floating React cookie consent card fixed to the corner, with a short notice and Accept and Reject buttons. It is a labelled dialog for assistive tech.

React copy to clipboard button that writes a value, then swaps to a check icon and Copied label for a moment. Accepts every Button variant and size.

Monospaced ID chip that copies its value to the clipboard on click and shows a check when done. Good for API keys, order IDs and record UUIDs.

Promo code field with an Apply button and inline success or error messages. The demo validation is easy to replace with your own check in React.

Test coverage bar with a label and percentage that turns green at 80, amber at 60 and red below. Exposed as a progressbar for screen readers.

Inline form to name and create an API key, with a labelled input and a Create key button that passes the name to your handler. Pairs with the key list.

Compact credit balance pill with a small label and a large tabular figure. Shows remaining credits or usage balance for AI and pay-as-you-go apps.

Luhn (mod 10) checksum, the check digit rule every major card number follows.

Tailwind call to action banner with a heading, supporting text and a primary button that stacks on mobile and sits in a row on wider screens.

Money input with a currency code prefix, decimal keypad on mobile and tabular numbers. Controlled via a string value to avoid rounding issues in React forms.

Danger zone settings card with a red outline, a warning that the action cannot be undone and a destructive delete button. Put it last on settings pages.

React data table with sortable columns, row selection, a floating bulk actions bar, hover row actions, sticky header, three densities and skeleton loading.

Date picker built on the native date input, styled to match the rest of your form fields. Returns ISO date strings and supports disabled and labelled states.

Start and end date range picker made from two labelled date inputs. Works controlled or uncontrolled and returns a from and to object for filters and reports.

Account deletion step with a danger alert and a confirmation field: the delete button stays disabled until the user types DELETE. Guards against misclicks.

Toggle group that switches between compact and comfortable density, reporting the choice to your handler. Pairs with data tables and dense list views.

Semantic dl, dt and dd list of label and value pairs in a responsive two column grid with dividers. Good for record details and summaries in Tailwind apps.

Shadcn compatible modal dialog on Base UI with a blurred backdrop, enter and exit animation, close button, header, title, description and a footer bar.

React code diff viewer that tints added lines green and removed lines red with plus and minus gutters, context lines and an optional filename header.

Single value donut chart in SVG that fills an accent ring to a percentage of max and prints the percent in the middle. Labelled as an image for screen readers.

Tailwind plan downgrade warning card with an amber border, a summary of what gets locked on the free plan, and Keep plan or Downgrade buttons.

Bottom drawer that slides a sheet up from the screen edge with a titled header, close button and scrolling body, capped at 80% of the viewport height.

Shadcn compatible dropdown menu on Base UI with groups, labels, checkbox and radio items, submenus, shortcuts, separators and destructive items.

Small Tailwind due date chip with a calendar icon that switches to a red border and icon when overdue. Use it on task cards, tickets and boards.

Inline editable title that looks like a large heading but is a text input. Use it for document, page or project names; works controlled or uncontrolled.

Solid link button for email templates with a fixed height, padding and rounded corners. Uses an anchor so it survives email clients that strip buttons.

Content card for transactional emails with an optional title and body text, inset from the email edges. Use it for receipts, codes and highlights.

Email footer with your company address and Unsubscribe and Preferences links, centered on a muted background. Covers what marketing emails need at the end.

Simple email header band that shows your brand name on a muted background with a bottom border. Sits at the top of the email layout in React templates.

Email layout shell with a centered 560px column, rounded border and surface background. Compose it with the email header, cards, button and footer.

Inbox style preview frame showing the sender and subject above the rendered email body. Handy for template galleries and email settings screens.

Compact emoji picker grid with a default set of twelve reactions or your own list, using listbox and option roles. Calls onSelect with the chosen emoji.

No results state for search that echoes the query in the title and suggests trying another query or clearing filters. Built on the empty state component.

Dashed empty state panel with an icon slot, title, description and an optional call to action button. Use it for first run screens and empty lists in React.

Empty table placeholder with a dashed border, a No data yet title, helper text and an optional button to create the first row. For React tables.

Uppercase environment badge for production, staging or development, with production outlined in red so live systems stand out in dev tools and consoles.

React segmented control for switching between Dev, Staging and Prod environments, reporting the selected value. Fits dashboards, API consoles and deploy tools.

React error state panel with an alert role, a title, explanation and an optional Try again button that calls your retry handler. For failed fetches.

A week and day event scheduler with overlap layout, an all-day row, a current time line and click to create.

Bordered Tailwind row that expands to reveal details on click, with a rotating chevron and aria-expanded. Can start open and takes any content.

Settings card to request a data export, explaining what the JSON export includes and when it will be ready, with a Request export button.

A titled checkbox facet group for sidebar search filters in React. Each option can show a result count, and the selected values come back as an array.

An FAQ section built on an accessible accordion. Pass question and answer pairs and each one expands in place, with keyboard support and a readable max width.

A settings row for flipping a feature flag on or off: flag name, optional description and a labeled switch, wired as a controlled React component.

A responsive grid of feature cards, one to three columns wide, each with an optional icon, a title and a short description. Built with React and Tailwind.

Thumbs up and thumbs down buttons for rating an answer or article. Uses aria-pressed, toggles off on a second click, and works controlled or uncontrolled.

A React drag and drop upload zone with accept and reject states, type and size checks, image previews, per file progress, retry and screen reader updates.

A stacked list of file rows showing each name and metadata such as size or date, with an optional download button per item. Good for React attachment lists.

A compact card that cites a source file with its name, monospace path and line range. Useful for code assistants, docs and AI answers that point into a repo.

A single file row with an icon, a truncated name, an optional meta line and a ghost download button with an accessible label. Styled with Tailwind.

A code editor style file explorer with file icons, git status, a filter field and full tree keyboard support.

A wrapping Tailwind toolbar for tables and lists: a search input first, your own filter controls as children, and a Clear button when onClear is set.

A round primary button fixed to the bottom right corner of the viewport for the main action on a screen. Accepts every Button prop, including icons.

Return an error message, or nothing when valid. Runs on submit and after the first error.

A multi column site footer with a brand block and titled link groups that reflow from one to five columns. A React and Tailwind footer for marketing sites.

A slim one line footer with the brand name on the left and a wrapping set of links in a labeled nav element. Fits app shells, docs and small landing pages.

A password reset request card with one email field and a full width Send reset email button, composed from AuthCard, FormField and Input in React.

A wrapper that pairs any input with its label, required marker, help text and an error message announced with role alert. Keeps React forms consistent.

A funnel chart with stage bars laid out horizontally or vertically, conversion rates and drop-off between stages, an optional comparison series and bars that s…

A conversion funnel drawn as labeled horizontal bars scaled to the largest step, with formatted counts per stage. Suited to signup and checkout analytics.

A project timeline with day and week scales, a today line, progress fills, dependency arrows, a sticky task column and focusable bars.

One row of a Gantt timeline: a task label beside a track with a bar placed by start and end values on a shared scale. Stack rows to build a React roadmap.

A semicircle SVG gauge that fills to a value against a max and prints the percentage in the center. Exposed as an image with an accessible label for dashboards.

A circular progress ring that shows how far along a goal is, with the percentage in the middle and a caption below. Handy for fitness, sales or weekly targets.

A heading primitive that renders h1 through h6 with a matched type scale, tuned letter spacing and medium weight. Pick the level with the as prop in React.

A status dot and label for service health with operational, degraded and down states mapped to success, warning and danger colors. Made for status pages.

A square heatmap cell whose fill blends from a muted base to the accent color by an intensity from 0 to 1, with an aria label. Tile it for activity grids.

A centered landing page hero with an optional eyebrow, a large headline, supporting copy and up to two call to action buttons. A plain Tailwind starting point.

A lightweight horizontal bar chart where each row shows a label, a rounded bar scaled to the largest value and the number. No chart library, just Tailwind.

A card that appears below a trigger on mouse hover to preview extra detail such as a user profile or link summary. A light take on the shadcn hover card.

A square React button for icon only actions in small, default and large sizes with every Button variant. Its aria-label prop is required, so it is always named.

Left edge in source pixels, measured on the image after `rotation`.

A responsive photo grid of square tiles, two columns on mobile and three on larger screens, each image cropped to fill. Built with React and Tailwind.

A clickable image thumbnail that opens a full screen modal of the picture with a dimmed backdrop and a close button. Handy for screenshots and product shots.

A single image picker that starts as a drag and drop zone, then swaps to a large preview with a remove button. Returns an object URL and the File in React.

A top of page bar telling support staff which user account they are viewing as, with an Exit button to end the session. Common in admin and support tools.

A full width Tailwind status bar announcing an outage with minor, major and critical severity colors, the incident title and a link to your status page.

Load the next page when a sentinel scrolls into view, with a loading row, an end of list message and a Load more button as the accessible fallback.

An inline React message box in neutral, success, warning and danger tones with a matching icon, an optional title and body text. Announced with role alert.

Click to edit table cell text: the value turns into an input on click, saves on Enter or blur and cancels on Escape. Built for editable React data grids.

A two line code diff showing the removed line in red with a minus and the added line in green with a plus, in monospace. Suits AI edit suggestions.

A text input with leading and trailing slots for icons, units or buttons, sharing one focus ring and invalid state across the field. Tailwind styled.

The base text input with sm, default and lg sizes and designed hover, focus, disabled, read only and invalid states. A drop in shadcn style input for React.

A recessed panel with a sunken background, rounded border and responsive padding for grouping secondary content, code samples or previews inside a card or page.

An app integration tile with the service name, a short description, a Connected or Available badge and a Connect or Manage button. Built in React.

A React SVG area chart with a crosshair that follows the pointer or arrow keys, showing the value and percent change against a dashed comparison line.

A team invite panel with an email input, a Send button and badges for pending invitations. A starting point for workspace member management in SaaS settings.

An invoice card with the number, date, a paid, open or void status badge, itemized line amounts and a bold total row. Built with React for billing pages.

A bordered list of invoices showing number, date, amount and a paid, open or void status badge on each row. Fits the billing history in account settings.

An editor for IP and CIDR allowlists: a monospace list with a remove button per entry plus an input and Add button that skips duplicates. Built in React.

A compact issue tracker card with a monospace ticket key, status and priority badges, a title and an assignee line. Fits Linear or Jira style boards.

A monospace ticket identifier such as MD-241 that renders as plain text or, given an href, as a link with an accent hover underline. For issue lists.

A centered card for joining a team workspace with an invite code: heading, helper text, a monospace code input and a full width Join button. Tailwind styled.

A collapsible JSON tree with syntax colours, item counts, copy value and copy path on hover, search highlighting and full keyboard navigation.

A horizontally scrolling Kanban board built from column data: each column shows its title, a card count and stacked cards with a title and optional meta line.

A single Kanban lane with a title, an optional count badge and a slot for any cards you render as children. Compose several to build your own React task board.

A keyboard key cap for showing shortcuts, with a raised edge and room for icons, plus a KbdGroup wrapper for combos like Cmd K. Renders a semantic kbd element.

A keyboard shortcuts cheat sheet in a dialog, opened with the ? key or a trigger button, with search and the right modifier glyphs for the viewer's platform.

A responsive row of KPI tiles, up to four across, each with a label, a large value and an up or down delta. Drop it at the top of a SaaS analytics dashboard.

A form label that dims and blocks pointer events when its peer input or group is disabled. Native label API, styled with Tailwind like the shadcn label.

A grid of language options exposed as an accessible listbox, with the selected language outlined in the accent color. Plug it into locale or profile settings.

A monospace millisecond badge that turns green under 100ms, amber under 400ms and red above. Useful for API monitors, model responses and status dashboards.

A page wide light source that follows the pointer and drifts when idle, driving shadows via CSS variables, plus a hairline, glass, metal and paper switcher.

A multi series SVG line chart with smooth curves, a dashed hairline grid and dots on the last point of each line, colored from chart tokens. No library.

A rich link card with an optional 2:1 cover image, title, two line description and the URL, opening in a new tab. Good for chat messages, posts and bookmarks.

A styled anchor with the accent color, underline on hover and a visible focus ring. Accepts every native anchor prop, so it works with Next.js or plain hrefs.

A flexible list row with leading and trailing slots around a truncated heading and description, split by hairline borders. Build settings or contact lists.

A multiplayer presence strip with overlapping colored avatars per collaborator and an editing now count. Suits docs, whiteboards and real time React editors.

A translucent overlay that covers its parent with a centered spinner and label while data loads, inheriting the parent radius and announced with role status.

A skeleton placeholder for data tables with configurable rows and columns, a header row and aria-busy so assistive tech knows content is loading.

A centered, wrapping row of customer or partner logos with names in muted text and an optional mark each. Adds social proof to a Tailwind landing page.

A passwordless sign in card with an email field and a Send link button that passes the address to onSend. Built from AuthCard, FormField and Input.

A markdown editor with a toolbar that wraps the selection, Cmd/Ctrl+B and I shortcuts, write, split and preview modes, a live preview rendered without innerHTM…

A small React renderer for AI output that splits text into paragraphs on blank lines and turns fenced code blocks into scrollable monospace panels.

An infinitely scrolling Tailwind strip that loops its children horizontally, duplicated for a gapless cycle, and stops when users prefer reduced motion.

Formats a value with a mask, e.g. applyMask("(999) 999-9999", "5550102030") gives "(555) 010-2030".

A masonry layout for React that keeps source order: a CSS grid with measured row spans, so keyboard and screen reader order match the visual flow.

A comment textarea that opens a suggestion list when you type @, filters names as you keep typing and inserts the chosen @mention. For React comments.

A desktop style app menubar built on Base UI: a row of triggers that each open a dropdown of items, with keyboard navigation between menus. shadcn compatible.

A React pull request merge panel with a success or warning callout for check status and a full width Merge button that stays disabled until checks pass.

A row of ghost icon buttons for chat replies: copy, retry, good response and bad response, each with an aria label and callback. Place it under AI messages.

A React chat message for user, assistant and system roles: user turns sit in a right aligned capsule, assistant replies read as prose, with a streaming cursor.

A horizontal gauge bar using role meter with aria value attributes, an optional label and a fill clamped to 100 percent. For storage, quota and usage limits.

A tiny percentage change indicator with an up arrow in green for gains and a down arrow in red for losses. Pair it with stat cards, KPI tiles and table cells.

An iOS style action sheet that rises from the bottom with a list of actions, destructive items in red, a Cancel button and a backdrop that dismisses on tap.

A hamburger button that opens a right side navigation drawer as a modal dialog, with a close button and links that dismiss it on tap. Built in React.

A comparison table for AI models listing name, latency with a color coded badge, cost and a quality note per row. Helps users pick between LLM providers.

A dropdown for choosing an AI model, built on the Select component with an accessible trigger and a placeholder. Pass an array of models and read the chosen id.

A React button that morphs into the panel it opens on a spring, blurring the label out and the form in. Ships with a feedback form and closes on Escape.

A multi select dropdown in a popover with check marks on chosen items and removable chips below the trigger. Works controlled or uncontrolled in React.

A sticky marketing header with a translucent blurred background, brand link, nav links that hide on mobile and Sign in and Get started buttons. Tailwind built.

A site navigation menu built on Base UI with triggers that open rich dropdown panels in a shared viewport, plus link items. Mirrors the shadcn navigation menu.

A collapsible tree navigation built from nested node data, indented by depth with rotating chevrons on items that have children. Fits React docs sidebars.

An inline email capture form with a required email field and a Subscribe button that stack on mobile and sit side by side on wider screens. Tailwind styled.

A 404 state with the error code, a Page not found heading, a short explanation and Go home and Open gallery buttons, centered in a card. Built in React.

A Jupyter style notebook cell with a Run button beside a code editor frame and an optional output panel below. Good for interactive docs and playgrounds.

A bell with an unread count that opens a notification popover: All and Mentions tabs, unread dots, mark all read, type icons and an empty state. Built in React.

A single notification row with an unread dot and tint, a truncated title, relative time and a short body line. Stack it in React inboxes and activity feeds.

A notification settings list of labeled switches for email digests, product updates and security alerts. A simple React start for preference pages.

A numeric stepper with minus and plus buttons around a centered input that clamps to min and max and moves by a custom step. Works controlled or uncontrolled.

An odometer style animated number where each digit rolls on a spring and only changed digits move. Supports Intl formatting, trend tint and reduced motion.

A full width amber banner shown when the app loses its connection, with a wifi off icon, a note that changes will sync later and an optional Retry button.

An offline status card with a warning dot, a You are offline heading, a note on what still works and a Retry connection button. For PWA and sync apps.

A Get started card with a list of setup tasks that toggle between done and pending on click, showing a check box and a strikethrough on completed items.

A three step React onboarding flow that walks new users through creating a workspace, inviting teammates and a done screen, with a stepper on top.

A checkout summary card listing line items such as subtotal, shipping and tax, then a separator and a bold total. Built with React for cart pages.

A collapsible organisation chart with connector lines, initials avatars, team colours, per node counts and arrow key navigation.

A popover switcher for moving between organizations or workspaces, showing the current name, a check on the active item and an optional plan label per org.

A React one time code input where one real input powers the slots, so paste, SMS autofill and screen readers work natively. Has groups, error shake and success.

A Tailwind page title block with an h1, an optional description and a wrapping slot for action buttons on the right, set off by a bottom border.

A pagination nav with Prev and Next buttons that disable at the edges and numbered page buttons that mark the current page with aria-current. Built in React.

A password field with a show and hide toggle inside the input, an eye icon that swaps state and an accessible label. Supports sm, default and lg sizes in React.

A React password field with a four step strength meter and a live rule checklist. Announces the score politely and accepts your own scorer such as zxcvbn.

A saved card row showing the card brand, last four digits and expiry date in monospace, with an Edit button. Fits the payment methods area of billing.

A right side detail panel with a titled header, a close button and a scrollable body for previewing a record without leaving the list. Tailwind styled.

A small uppercase chip for access levels: admin, write or read. Use it in member lists, API key tables and sharing dialogs to show what a user or token can do.

A 403 style access card explaining that admin rights are needed, with Request access and Switch workspace buttons. Use it wherever a route is role gated.

A telephone number field with type tel, a numeric keypad on mobile, tel autocomplete, tabular digits and a default aria label. Styled like the React base input.

An SVG pie chart with leader line labels, a legend and slices that pull out on hover or focus.

A highlighted pinned note for chat channels and threads with a pin icon, a Pinned by author line and the message body on an accent tinted Tailwind background.

A pricing plan card with the plan name, a large price per period, a feature list and a full width call to action. A highlighted prop marks the recommended tier.

A Free versus Pro comparison table with a row per feature and check or dash icons in each plan column. Shows what an upgrade unlocks on Tailwind pricing pages.

A floating React panel anchored to a trigger, built on Base UI with side and align options, collision aware positioning, title and description parts.