---
name: "@minidev"
slug: "minidev"
description: "500+ free components, blocks and motion pieces for product UI: data tables, billing, settings, command palettes and AI chat. Built on Base UI, Tailwind CSS v4 and motion."
category: "Animated components"
tags: ["ai", "animation", "audio", "auth", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "e-commerce", "editor", "forms", "loaders", "marketing", "media", "navigation", "onboarding", "overlays", "payments", "pro-available", "tables"]
framework: "react"
license: "MIT"
author: "amankaushik481"
website: "https://ui.minidev.pro"
github: "https://github.com/amankaushik481/minidev-ui"
registry: "https://ui.minidev.pro/r/registry.json"
pro: true
pro_url: "https://ui.minidev.pro/gallery/premium-motion"
github_stars: 1
component_count: 250
generated_at: "2026-10-10T06:32:55.998Z"
---

# @minidev

500+ free components, blocks and motion pieces for product UI: data tables, billing, settings, command palettes and AI chat. Built on Base UI, Tailwind CSS v4 and motion.

## Links

- Website: https://ui.minidev.pro
- GitHub: https://github.com/amankaushik481/minidev-ui
- Registry JSON: https://ui.minidev.pro/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/minidev
- This file: https://sh4dcn.vercel.app/md/minidev.md
- Pro / pricing: https://ui.minidev.pro/gallery/premium-motion

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.minidev.pro/r/registry.json
pnpm dlx shadcn@latest add https://ui.minidev.pro/r/registry.json
bunx shadcn@latest add https://ui.minidev.pro/r/registry.json
# clone the source repo
git clone https://github.com/amankaushik481/minidev-ui.git
# fetch the raw registry index
curl -s https://ui.minidev.pro/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/accordion.json` |
| account-setup-progress | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/account-setup-progress.json` |
| activity-feed | registry:ui | React activity feed that lists who did what and when, with initials avatars, muted action text and tabular timestamps in a single bordered card. | `npx shadcn@latest add https://ui.minidev.pro/r/activity-feed.json` |
| add-card-form | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/add-card-form.json` |
| admin-stat-strip | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/admin-stat-strip.json` |
| admin-user-row | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/admin-user-row.json` |
| agent-trace | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/agent-trace.json` |
| ai-composer | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/ai-composer.json` |
| alert-dialog | registry:ui | Shadcn style alert dialog on Base UI for confirmations that need an explicit answer. Modal backdrop, focus trap, title, description and an actions row. | `npx shadcn@latest add https://ui.minidev.pro/r/alert-dialog.json` |
| announcement-bar | registry:ui | Slim site-wide announcement bar for launches, promos or notices. Centered content, a polite status role for screen readers and an optional dismiss button. | `npx shadcn@latest add https://ui.minidev.pro/r/announcement-bar.json` |
| api-key-list | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/api-key-list.json` |
| app-shell | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/app-shell.json` |
| approval-card | registry:ui | React request card for approval workflows showing the requester avatar, title and summary, with Reject and Approve buttons wired to your callbacks. | `npx shadcn@latest add https://ui.minidev.pro/r/approval-card.json` |
| area-chart | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/area-chart.json` |
| artifact-preview | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/artifact-preview.json` |
| aspect-ratio | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/aspect-ratio.json` |
| assign-picker | registry:ui | Assignee picker for tasks and tickets: a listbox of people with initials avatars, where the selected person is highlighted and choices report their id. | `npx shadcn@latest add https://ui.minidev.pro/r/assign-picker.json` |
| attachment-chip | registry:ui | Compact Tailwind file chip with a paperclip icon, truncated filename and an optional remove button, for attachments in chat composers, emails and forms. | `npx shadcn@latest add https://ui.minidev.pro/r/attachment-chip.json` |
| audio-player | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/audio-player.json` |
| audit-filter-bar | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/audit-filter-bar.json` |
| audit-log-entry | registry:ui | Single audit log line: actor avatar, actor name, muted action text and the affected target, with a relative timestamp underneath. Stacks into a trail. | `npx shadcn@latest add https://ui.minidev.pro/r/audit-log-entry.json` |
| audit-trail | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/audit-trail.json` |
| auth-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/auth-card.json` |
| autocomplete | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/autocomplete.json` |
| avatar-group | registry:ui | Shown under the name in the tooltip and overflow list. | `npx shadcn@latest add https://ui.minidev.pro/r/avatar-group.json` |
| avatar-upload | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/avatar-upload.json` |
| avatar | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/avatar.json` |
| back-link | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/back-link.json` |
| back-to-top | registry:ui | A back to top button that appears after scrolling, with a ring that fills as the reader progresses. Smooth scroll that respects reduced motion. | `npx shadcn@latest add https://ui.minidev.pro/r/back-to-top.json` |
| badge | registry:ui | Shadcn style badge in seven variants: default, accent, secondary, destructive, outline, ghost and link. Renders as a span or any element, with icon support. | `npx shadcn@latest add https://ui.minidev.pro/r/badge.json` |
| banner | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/banner.json` |
| bar-chart | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/bar-chart.json` |
| bento-grid | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/bento-grid.json` |
| billing-address | registry:ui | Tailwind billing address fieldset with a multiline street field and a responsive row for city, state and postal code. Drops into checkout forms. | `npx shadcn@latest add https://ui.minidev.pro/r/billing-address.json` |
| blog-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/blog-card.json` |
| breadcrumb-ellipsis | registry:ui | Ellipsis marker for collapsing the middle of long breadcrumb trails. Decorative and hidden from assistive tech, sized to sit between breadcrumb separators. | `npx shadcn@latest add https://ui.minidev.pro/r/breadcrumb-ellipsis.json` |
| breadcrumb | registry:ui | Breadcrumb navigation from an items array, with chevron separators, linked ancestors and the current page marked with aria-current. Built with React. | `npx shadcn@latest add https://ui.minidev.pro/r/breadcrumb.json` |
| build-pipeline | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/build-pipeline.json` |
| bulk-actions-bar | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/bulk-actions-bar.json` |
| bulk-user-import | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/bulk-user-import.json` |
| button-group | registry:ui | Groups adjacent buttons into one segmented control in Tailwind, joining borders and rounding only the outer corners. Uses role group for toolbars. | `npx shadcn@latest add https://ui.minidev.pro/r/button-group.json` |
| button | registry:ui | Shadcn compatible React button on Base UI with eight variants, nine sizes including icon sizes, a pressed state and render prop support for links. | `npx shadcn@latest add https://ui.minidev.pro/r/button.json` |
| calendar-agenda | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/calendar-agenda.json` |
| calendar-month | registry:ui | Month calendar grid with weekday headers and clickable day cells that highlight the selected date. A simple Tailwind base for date views and schedulers. | `npx shadcn@latest add https://ui.minidev.pro/r/calendar-month.json` |
| callout | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/callout.json` |
| cancel-flow | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/cancel-flow.json` |
| card | registry:ui | Shadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4. | `npx shadcn@latest add https://ui.minidev.pro/r/card.json` |
| carousel | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/carousel.json` |
| cart-line-item | registry:ui | React shopping cart row with product title, unit price, a quantity stepper and an optional remove button. Callbacks report quantity changes and removals. | `npx shadcn@latest add https://ui.minidev.pro/r/cart-line-item.json` |
| case-study-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/case-study-card.json` |
| center | registry:ui | Layout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes. | `npx shadcn@latest add https://ui.minidev.pro/r/center.json` |
| character-count | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/character-count.json` |
| chart-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/chart-card.json` |
| chart-legend | registry:ui | Wrapping chart legend with small color swatches and labels. Pass colors per series or fall back to accent, success, warning and danger theme tokens. | `npx shadcn@latest add https://ui.minidev.pro/r/chart-legend.json` |
| chart-tooltip-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/chart-tooltip-card.json` |
| chat-thread | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/chat-thread.json` |
| check-run-list | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/check-run-list.json` |
| checkbox-group | registry:ui | Vertical wrapper that groups related checkboxes under role group with even spacing. Use it with Checkbox and labels for multi select settings. | `npx shadcn@latest add https://ui.minidev.pro/r/checkbox-group.json` |
| checkbox | registry:ui | Shadcn style checkbox on Base UI with an animated check, indeterminate state, invalid and disabled styles, and an enlarged hit area for touch. | `npx shadcn@latest add https://ui.minidev.pro/r/checkbox.json` |
| checkout-summary | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/checkout-summary.json` |
| chip-filter | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/chip-filter.json` |
| choice-card | registry:ui | Selectable React card button with an icon, title and description, using aria-pressed and an accent outline when chosen. Suits plan pickers and onboarding. | `npx shadcn@latest add https://ui.minidev.pro/r/choice-card.json` |
| citation-chip | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/citation-chip.json` |
| cluster | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/cluster.json` |
| code-block | registry:ui | React code block with zero dependency syntax coloring, a language tag, optional filename and line numbers, and a copy button that confirms Copied. | `npx shadcn@latest add https://ui.minidev.pro/r/code-block.json` |
| code-editor-frame | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/code-editor-frame.json` |
| collapsible-sidebar | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/collapsible-sidebar.json` |
| collapsible | registry:ui | Shadcn compatible collapsible on Base UI: a full width trigger that shows or hides a panel of content. Accessible expanded state and keyboard support. | `npx shadcn@latest add https://ui.minidev.pro/r/collapsible.json` |
| color-picker | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/color-picker.json` |
| column-visibility-menu | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/column-visibility-menu.json` |
| combobox | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/combobox.json` |
| command-dialog | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/command-dialog.json` |
| command-item | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/command-item.json` |
| command-palette | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/command-palette.json` |
| comment-composer | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/comment-composer.json` |
| comment-thread | registry:ui | Threaded React comment list with initials avatars, author name, timestamp and body in bordered bubbles. Pairs with the comment composer. | `npx shadcn@latest add https://ui.minidev.pro/r/comment-thread.json` |
| commit-row | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/commit-row.json` |
| comparison-table | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/comparison-table.json` |
| confirm-destructive | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/confirm-destructive.json` |
| connected-account | registry:ui | Tailwind settings row for a linked third party account showing the provider and account name, with a Disconnect button. For OAuth and integrations. | `npx shadcn@latest add https://ui.minidev.pro/r/connected-account.json` |
| console-output | registry:ui | Scrollable Tailwind console panel in monospace that prints log, warn and error lines with level labels. Uses a log role and is keyboard focusable. | `npx shadcn@latest add https://ui.minidev.pro/r/console-output.json` |
| container | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/container.json` |
| context-chip | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/context-chip.json` |
| context-menu | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/context-menu.json` |
| context-pill | registry:ui | Rounded pill for showing attached context, such as files or pages in an AI prompt, with a truncated label and an optional remove button. | `npx shadcn@latest add https://ui.minidev.pro/r/context-pill.json` |
| conversation-sidebar | registry:ui | React chat history sidebar with a New chat button and a scrolling list of conversations showing title and relative time. Highlights the active chat. | `npx shadcn@latest add https://ui.minidev.pro/r/conversation-sidebar.json` |
| cookie-banner | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/cookie-banner.json` |
| copy-button | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/copy-button.json` |
| copy-id | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/copy-id.json` |
| coupon-input | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/coupon-input.json` |
| coverage-meter | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/coverage-meter.json` |
| create-api-key | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/create-api-key.json` |
| credit-balance | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/credit-balance.json` |
| credit-card-input | registry:ui | Luhn (mod 10) checksum, the check digit rule every major card number follows. | `npx shadcn@latest add https://ui.minidev.pro/r/credit-card-input.json` |
| cta-banner | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/cta-banner.json` |
| currency-input | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/currency-input.json` |
| danger-zone | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/danger-zone.json` |
| data-table | registry:ui | React data table with sortable columns, row selection, a floating bulk actions bar, hover row actions, sticky header, three densities and skeleton loading. | `npx shadcn@latest add https://ui.minidev.pro/r/data-table.json` |
| date-picker | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/date-picker.json` |
| date-range-picker | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/date-range-picker.json` |
| delete-account-confirm | registry:ui | Account deletion step with a danger alert and a confirmation field: the delete button stays disabled until the user types DELETE. Guards against misclicks. | `npx shadcn@latest add https://ui.minidev.pro/r/delete-account-confirm.json` |
| density-toggle | registry:ui | Toggle group that switches between compact and comfortable density, reporting the choice to your handler. Pairs with data tables and dense list views. | `npx shadcn@latest add https://ui.minidev.pro/r/density-toggle.json` |
| description-list | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/description-list.json` |
| dialog | registry:ui | Shadcn compatible modal dialog on Base UI with a blurred backdrop, enter and exit animation, close button, header, title, description and a footer bar. | `npx shadcn@latest add https://ui.minidev.pro/r/dialog.json` |
| diff-view | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/diff-view.json` |
| donut-chart | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/donut-chart.json` |
| downgrade-warning | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/downgrade-warning.json` |
| drawer | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/drawer.json` |
| dropdown-menu | registry:ui | Shadcn compatible dropdown menu on Base UI with groups, labels, checkbox and radio items, submenus, shortcuts, separators and destructive items. | `npx shadcn@latest add https://ui.minidev.pro/r/dropdown-menu.json` |
| due-date-chip | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/due-date-chip.json` |
| editable-heading | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/editable-heading.json` |
| email-button | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/email-button.json` |
| email-card | registry:ui | Content card for transactional emails with an optional title and body text, inset from the email edges. Use it for receipts, codes and highlights. | `npx shadcn@latest add https://ui.minidev.pro/r/email-card.json` |
| email-footer | registry:ui | Email footer with your company address and Unsubscribe and Preferences links, centered on a muted background. Covers what marketing emails need at the end. | `npx shadcn@latest add https://ui.minidev.pro/r/email-footer.json` |
| email-header | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/email-header.json` |
| email-layout | registry:ui | Email layout shell with a centered 560px column, rounded border and surface background. Compose it with the email header, cards, button and footer. | `npx shadcn@latest add https://ui.minidev.pro/r/email-layout.json` |
| email-preview-frame | registry:ui | Inbox style preview frame showing the sender and subject above the rendered email body. Handy for template galleries and email settings screens. | `npx shadcn@latest add https://ui.minidev.pro/r/email-preview-frame.json` |
| emoji-picker | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/emoji-picker.json` |
| empty-search | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/empty-search.json` |
| empty-state | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/empty-state.json` |
| empty-table | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/empty-table.json` |
| env-badge | registry:ui | Uppercase environment badge for production, staging or development, with production outlined in red so live systems stand out in dev tools and consoles. | `npx shadcn@latest add https://ui.minidev.pro/r/env-badge.json` |
| env-switcher | registry:ui | React segmented control for switching between Dev, Staging and Prod environments, reporting the selected value. Fits dashboards, API consoles and deploy tools. | `npx shadcn@latest add https://ui.minidev.pro/r/env-switcher.json` |
| error-state | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/error-state.json` |
| event-calendar | registry:ui | A week and day event scheduler with overlap layout, an all-day row, a current time line and click to create. | `npx shadcn@latest add https://ui.minidev.pro/r/event-calendar.json` |
| expandable-row | registry:ui | Bordered Tailwind row that expands to reveal details on click, with a rotating chevron and aria-expanded. Can start open and takes any content. | `npx shadcn@latest add https://ui.minidev.pro/r/expandable-row.json` |
| export-data | registry:ui | Settings card to request a data export, explaining what the JSON export includes and when it will be ready, with a Request export button. | `npx shadcn@latest add https://ui.minidev.pro/r/export-data.json` |
| facet-filter | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/facet-filter.json` |
| faq-list | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/faq-list.json` |
| feature-flag-toggle | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/feature-flag-toggle.json` |
| feature-grid | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/feature-grid.json` |
| feedback-thumbs | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/feedback-thumbs.json` |
| file-dropzone | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/file-dropzone.json` |
| file-list | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/file-list.json` |
| file-reference | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/file-reference.json` |
| file-row | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/file-row.json` |
| file-tree | registry:ui | A code editor style file explorer with file icons, git status, a filter field and full tree keyboard support. | `npx shadcn@latest add https://ui.minidev.pro/r/file-tree.json` |
| filter-bar | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/filter-bar.json` |
| floating-action-button | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/floating-action-button.json` |
| floating-label-input | registry:ui | Return an error message, or nothing when valid. Runs on submit and after the first error. | `npx shadcn@latest add https://ui.minidev.pro/r/floating-label-input.json` |
| footer-mega | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/footer-mega.json` |
| footer-nav | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/footer-nav.json` |
| forgot-password-form | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/forgot-password-form.json` |
| form-field | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/form-field.json` |
| funnel-steps | registry:ui | A conversion funnel drawn as labeled horizontal bars scaled to the largest step, with formatted counts per stage. Suited to signup and checkout analytics. | `npx shadcn@latest add https://ui.minidev.pro/r/funnel-steps.json` |
| gantt-row | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/gantt-row.json` |
| gauge-chart | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/gauge-chart.json` |
| goal-ring | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/goal-ring.json` |
| heading | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/heading.json` |
| health-indicator | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/health-indicator.json` |
| heatmap-cell | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/heatmap-cell.json` |
| hero | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/hero.json` |
| horizontal-bar-chart | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/horizontal-bar-chart.json` |
| hover-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/hover-card.json` |
| icon-button | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/icon-button.json` |
| image-cropper | registry:ui | Left edge in source pixels, measured on the image after `rotation`. | `npx shadcn@latest add https://ui.minidev.pro/r/image-cropper.json` |
| image-gallery | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/image-gallery.json` |
| image-lightbox | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/image-lightbox.json` |
| image-upload | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/image-upload.json` |
| impersonation-banner | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/impersonation-banner.json` |
| incident-banner | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/incident-banner.json` |
| infinite-scroll | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/infinite-scroll.json` |
| inline-alert | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/inline-alert.json` |
| inline-cell-edit | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/inline-cell-edit.json` |
| inline-code-diff | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/inline-code-diff.json` |
| input-affix | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/input-affix.json` |
| input | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/input.json` |
| inset | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/inset.json` |
| integration-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/integration-card.json` |
| interactive-area-chart | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/interactive-area-chart.json` |
| invite-members | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/invite-members.json` |
| invoice-detail | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/invoice-detail.json` |
| invoice-list | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/invoice-list.json` |
| ip-allowlist | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/ip-allowlist.json` |
| issue-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/issue-card.json` |
| issue-key | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/issue-key.json` |
| join-workspace | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/join-workspace.json` |
| json-viewer | registry:ui | Pretty prints any JavaScript value as indented JSON in a scrollable monospace block, falling back to a string if it cannot serialize. For React debug panels. | `npx shadcn@latest add https://ui.minidev.pro/r/json-viewer.json` |
| kanban-board | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/kanban-board.json` |
| kanban-column | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/kanban-column.json` |
| kbd | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/kbd.json` |
| kpi-row | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/kpi-row.json` |
| label | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/label.json` |
| language-picker | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/language-picker.json` |
| latency-badge | registry:ui | A monospace millisecond badge that turns green under 100ms, amber under 400ms and red above. Useful for API monitors, model responses and status dashboards. | `npx shadcn@latest add https://ui.minidev.pro/r/latency-badge.json` |
| light-provider | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/light-provider.json` |
| line-chart | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/line-chart.json` |
| link-preview | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/link-preview.json` |
| link | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/link.json` |
| list-item | registry:ui | A flexible list row with leading and trailing slots around a truncated heading and description, split by hairline borders. Build settings or contact lists. | `npx shadcn@latest add https://ui.minidev.pro/r/list-item.json` |
| live-cursors-bar | registry:ui | A multiplayer presence strip with overlapping colored avatars per collaborator and an editing now count. Suits docs, whiteboards and real time React editors. | `npx shadcn@latest add https://ui.minidev.pro/r/live-cursors-bar.json` |
| loading-overlay | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/loading-overlay.json` |
| loading-table | registry:ui | A skeleton placeholder for data tables with configurable rows and columns, a header row and aria-busy so assistive tech knows content is loading. | `npx shadcn@latest add https://ui.minidev.pro/r/loading-table.json` |
| logo-cloud | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/logo-cloud.json` |
| magic-link-form | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/magic-link-form.json` |
| markdown-renderer | registry:ui | A small React renderer for AI output that splits text into paragraphs on blank lines and turns fenced code blocks into scrollable monospace panels. | `npx shadcn@latest add https://ui.minidev.pro/r/markdown-renderer.json` |
| marquee | registry:ui | An infinitely scrolling Tailwind strip that loops its children horizontally, duplicated for a gapless cycle, and stops when users prefer reduced motion. | `npx shadcn@latest add https://ui.minidev.pro/r/marquee.json` |
| masked-input | registry:ui | Formats a value with a mask, e.g. applyMask("(999) 999-9999", "5550102030") gives "(555) 010-2030". | `npx shadcn@latest add https://ui.minidev.pro/r/masked-input.json` |
| masonry-grid | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/masonry-grid.json` |
| mention-input | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/mention-input.json` |
| menubar | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/menubar.json` |
| merge-box | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/merge-box.json` |
| message-actions | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/message-actions.json` |
| message-bubble | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/message-bubble.json` |
| meter | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/meter.json` |
| metric-delta | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/metric-delta.json` |
| mobile-action-sheet | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/mobile-action-sheet.json` |
| mobile-nav-drawer | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/mobile-nav-drawer.json` |
| model-compare | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/model-compare.json` |
| model-picker | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/model-picker.json` |
| morph-panel | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/morph-panel.json` |
| multi-select | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/multi-select.json` |
| nav-marketing | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/nav-marketing.json` |
| navigation-menu | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/navigation-menu.json` |
| nested-nav | registry:ui | A collapsible tree navigation built from nested node data, indented by depth with rotating chevrons on items that have children. Fits React docs sidebars. | `npx shadcn@latest add https://ui.minidev.pro/r/nested-nav.json` |
| newsletter-signup | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/newsletter-signup.json` |
| not-found-state | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/not-found-state.json` |
| notebook-cell | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/notebook-cell.json` |
| notification-inbox | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/notification-inbox.json` |
| notification-item | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/notification-item.json` |
| notification-preferences | registry:ui | A notification settings list of labeled switches for email digests, product updates and security alerts. A simple React start for preference pages. | `npx shadcn@latest add https://ui.minidev.pro/r/notification-preferences.json` |
| number-input | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/number-input.json` |
| number-roll | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/number-roll.json` |
| offline-banner | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/offline-banner.json` |
| offline-state | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/offline-state.json` |
| onboarding-checklist | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/onboarding-checklist.json` |
| onboarding-wizard | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/onboarding-wizard.json` |
| order-summary | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/order-summary.json` |
| org-switcher | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/org-switcher.json` |
| otp-input | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/otp-input.json` |
| page-header | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/page-header.json` |
| pagination | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/pagination.json` |
| password-input | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/password-input.json` |
| password-strength | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/password-strength.json` |
| payment-method-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/payment-method-card.json` |
| peek-panel | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/peek-panel.json` |
| permission-chip | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/permission-chip.json` |
| permission-denied | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/permission-denied.json` |
| phone-input | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/phone-input.json` |
| pie-chart | registry:ui | An SVG pie chart with leader line labels, a legend and slices that pull out on hover or focus. | `npx shadcn@latest add https://ui.minidev.pro/r/pie-chart.json` |
| pinned-message | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/pinned-message.json` |
| plan-card | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/plan-card.json` |
| plan-comparison | registry:ui | 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. | `npx shadcn@latest add https://ui.minidev.pro/r/plan-comparison.json` |
| popover | registry:ui | A floating React panel anchored to a trigger, built on Base UI with side and align options, collision aware positioning, title and description parts. | `npx shadcn@latest add https://ui.minidev.pro/r/popover.json` |
| presence-dot | registry:ui | A small colored dot for user status: online, away, busy or offline, exposed with role status and an aria label. Overlay it on avatars in chat and team lists. | `npx shadcn@latest add https://ui.minidev.pro/r/presence-dot.json` |
| press-quote | registry:ui | A centered press or testimonial quote using figure, blockquote and figcaption, with a large quoted line and an uppercase source. Adds proof to landing pages. | `npx shadcn@latest add https://ui.minidev.pro/r/press-quote.json` |
| pricing-table | registry:ui | A three column pricing section that renders a PlanCard for each tier you pass in, stacking on mobile. Mark one plan as highlighted to steer visitors toward it. | `npx shadcn@latest add https://ui.minidev.pro/r/pricing-table.json` |
| pricing-toggle | registry:ui | A Monthly and Yearly billing period switch built on a segmented control, with a Save 20% with yearly note underneath. Pairs with pricing tables and plan cards. | `npx shadcn@latest add https://ui.minidev.pro/r/pricing-toggle.json` |
| priority-picker | registry:ui | A radio group of priority chips, Low, Medium, High and Urgent, each with a colored dot and aria-checked state. Built for issue trackers, tasks and ticket forms. | `npx shadcn@latest add https://ui.minidev.pro/r/priority-picker.json` |
| product-card | registry:ui | A storefront product tile with a square image, an optional corner badge like Sale or New, the product title, price and an Add to cart button when onAdd is set. | `npx shadcn@latest add https://ui.minidev.pro/r/product-card.json` |

## For AI agents

```text
You are adding components from @minidev to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/minidev.md) for the component list.
2. Fetch the machine-readable index: https://ui.minidev.pro/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: minidev).
```