The explorer for the shadcn registry ecosystem.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev UI] A three step onboarding card for naming a workspace, inviting teammates by email and reviewing theme choices, with step progress and back or continue.
[MiniDev UI] An animated onboarding card with a clickable segmented step bar, content that slides between steps, back and continue buttons, and a final CTA.
[MiniDev 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.
[MiniDev UI] Icons orbit a central hub on hairline rings for integration sections. Set radius, speed and direction per ring; icons stay upright while they travel.
[MiniDev UI] A cluster of logo chips orbiting a center badge in a slow continuous rotation, with labels counter rotating to stay upright. Pass center text and logos.
[MiniDev 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.
[MiniDev UI] A collapsible organisation chart with connector lines, initials avatars, team colours, per node counts and arrow key navigation.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev UI] A panel where the heading text and a glowing accent orb move at different speeds as you scroll, giving scroll linked parallax depth with transforms only.
[MiniDev UI] A canvas particle field that drifts behind your content and parts around the pointer, or gathers toward it.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev UI] An SVG pie chart with leader line labels, a legend and slices that pull out on hover or focus.
[MiniDev 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.
[MiniDev UI] A pinned horizontal scroll gallery: the section sticks while vertical scrolling slides frames sideways. Falls back to a three column grid for reduced motion.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev UI] A React motion landing page combining an aurora hero, an animated feature row, three tier pricing cards that rise into view and a glowing closing CTA.
[MiniDev 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.
[MiniDev 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.
[MiniDev UI] A pricing section pairing a kinetic headline and a typographic marquee with a free versus premium feature comparison table. Built for React launch pages.
[MiniDev UI] Pricing plan cards that fade up in sequence on scroll, each with name, price, blurb, feature bullets and a choose button, plus an accent featured plan.
[MiniDev UI] A full Tailwind pricing page with a monthly or yearly toggle, animated plan cards, a feature comparison table, pricing FAQs, a glowing CTA and a mega footer.
[MiniDev UI] A React pricing section with a monthly or yearly switch that rolls prices to the new value, a featured ink plan, and feature rows marked included or not.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev 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.
[MiniDev UI] A product launch page with a scroll progress rail, kinetic hero, device stack, sticky feature story, before and after wipe, stats, countdown and waitlist.
[MiniDev UI] A mock product interface that auto cycles through inbox, pipeline and agents views with animated rows and progress bars. Click the sidebar to switch.
[MiniDev UI] A React product tour with a clickable list of steps beside a detail panel that fades in for the active step, plus back and next buttons that stop at the ends.
[MiniDev UI] An account profile form with a display name input, a bio textarea and a Save profile button, composed from FormField, Input and Textarea in React.
[MiniDev UI] A linear progress bar built on Base UI with track, indicator, label and value parts, a default aria label and smooth width transitions. Matches shadcn progress.
[MiniDev UI] A compact circular progress indicator drawn in SVG with a configurable size, an accent arc, an accessible label and the percentage in monospace below it.