sh4dcnv2 · atlas
← libraries

@reui

ReUI is the largest free open-source shadcn/ui extension library, offering 1,000+ components across 68+ categories including 17 custom in-house primitives: Data Grid (TanStack Table + Virtual, DnD, pinning, resizing, infinite scroll), Kanban, Filters (URL-state, Zod, TanStack), Sortable, Timeline, Stepper, Tree, File Upload, Date Selector, Autocomplete, Number Field, and more. All components are shown in realistic dashboard layouts, not isolated demos. Supports both Radix UI and Base UI flavors, all five shadcn create styles (Vega, Nova, Maia, Lyra, Mira), Tailwind v4, TypeScript. A paid ReUI Pro tier is in waitlist. Free core is MIT. Use for: building complex admin dashboards or SaaS back-office UIs that need production-grade tables, filters, and data management components beyond base shadcn/ui.

250 components pro available react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://reui.io/r/registry.json
pnpm pnpm dlx shadcn@latest add https://reui.io/r/registry.json
bun bunx shadcn@latest add https://reui.io/r/registry.json
fetch registry curl -s https://reui.io/r/registry.json

Components

250 total
Alert ui
npx shadcn@latest add https://reui.io/r/{style}/alert.json
Collapsible icon-rail sidebar app shell with workspace switcher, nested nav, an… block

Dashboard app shell with an icon-collapsible sidebar: workspace switcher, nested platform nav with count badges, pinned resources with row action menus, theme …

npx shadcn@latest add https://reui.io/r/{style}/app-shell-1.json
AI Agents App Shell with Collapsible Sidebar, Active-Project Rings, and Rich No… block

Inset sidebar shell for an AI agents console: command-K search, collapsible agent nav, projects with progress rings, usage-limit card, org and theme switcher, …

npx shadcn@latest add https://reui.io/r/{style}/app-shell-10.json
Operations app shell with four toggleable regions and a resizable bottom workbe… block

Dense operations console: collapsible nav, resizable split panes, an expandable bottom workbench sheet, and a right calendar and agenda rail. ReUI Badge, Frame…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-11.json
Icon-rail sidebar app shell with command-K search, notifications feed, apps gri… block

Dashboard shell: collapsible icon-rail sidebar with nested nav, Soon badges, and project progress rings, plus a header command-K search, rich notifications fee…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-12.json
Community feed app shell with full-width header above a collapsible icon-rail s… block

Full-width header over a collapsible icon-rail sidebar for community feed apps. Search, Create button, avatar menu, theme toggle, grouped nav with badges, nest…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-13.json
Mini icon-rail app shell with per-section secondary nav and a tabbed workspace … block

Three-region workspace shell: icon rail, a toggleable secondary nav that swaps per section, and a toolbar with List, Kanban, Calendar, Dashboard tabs plus Sort…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-14.json
Dark full-width topbar app shell with workspace switcher, pinnable sidebar nav,… block

Dashboard shell with a fixed dark topbar over an icon-collapsible sidebar: workspace switcher, pin/unpin nav with badges, favorites group, gradient Upgrade men…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-15.json
Dual sidebar app shell with icon rail and collapsible secondary navigation panel block

Two-level dashboard layout: icon rail plus a toggleable secondary nav that swaps per section, with workspace switcher, breadcrumb header, search, and account m…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-16.json
AI chat assistant app shell with floating sidebar, model picker grid, and promp… block

AI chat workspace: floating collapsible sidebar with a GPT-4/Claude/Gemini model picker, pinned and recent threads, a welcome canvas, and an InputGroup compose…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-17.json
Task workspace app shell with collapsible floating sidebar and a toggleable AI … block

Three-panel to-do shell: floating Sidebar with task lists, count Badges, color tags and a Progress focus card, plus a toggleable AI chat panel (in-flow at desk…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-18.json
Calendar app shell with inset sidebar date picker, up-next agenda, and Day/Week… block

Calendar app layout: inset Sidebar with a Calendar date picker, up-next agenda, calendars menu, account menu, and a header Day/Week/Month switcher. ReUI Badge,…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-19.json
Floating icon-collapsible sidebar shell with command-K search, nested nav, and … block

App shell with a floating collapsible-to-icon Sidebar, command-K search Dialog, nested Platform nav with a live status pulse, workspace switcher Dropdown, and …

npx shadcn@latest add https://reui.io/r/{style}/app-shell-2.json
Mail client app shell with folder sidebar, split list and reading panes, and ic… block

Email workspace: inset Sidebar with account menu, compose dialog, folders, labels and contacts, a search and category-filter message list, a reading pane, and …

npx shadcn@latest add https://reui.io/r/{style}/app-shell-20.json
Inset sidebar app shell with per-project progress rings and a multi-type notifi… block

Inset collapsible sidebar dashboard shell with workspace switcher, command search, project donut progress rings, usage limit meter, and notifications popover. …

npx shadcn@latest add https://reui.io/r/{style}/app-shell-3.json
Mail inbox app shell with icon folder rail, wide message list, and selected-mes… block

Mail and inbox shell: folder icon rail plus a wide 440px message list with live search, filter tabs, rich preview rows, and a selected-message action header (r…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-4.json
Calendar app shell, icon-rail sidebar switching Calendar, Schedule, Contacts, N… block

Calendar workspace with a dual-pane icon-rail Sidebar swapping mini-Calendar accounts, date-grouped Schedule, searchable Contacts, and Notifications. Uses ReUI…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-5.json
Dual Sidebar App Shell with Dark Nav Rail and Slide-In Calendar Context Panel block

Three-column workspace shell: dark collapsible nav rail with command search, team list and usage meter, breadcrumb header, and a slide-in right Calendar panel …

npx shadcn@latest add https://reui.io/r/{style}/app-shell-6.json
Breadcrumb-switcher app shell with org/app/environment dropdowns and a live sys… block

Header-first shell with a breadcrumb of org, app, and environment switcher dropdowns, a live system monitor popover with resource sparklines, command-palette s…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-7.json
Inset icon-rail app shell with per-section secondary nav, org/app/env switchers… block

Two-level dashboard shell: icon rail plus a per-section secondary nav with live-metric/storage footers, org/app/env switchers, command-K search, and notificati…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-8.json
Dark inset-sidebar team workspace shell with member presence rail and notificat… block

Dark collapsible-sidebar team shell: presence member rail, notifications feed, command search, AI-credit usage card, workspace switcher. ReUI Frame, Badge; sha…

npx shadcn@latest add https://reui.io/r/{style}/app-shell-9.json
Split-screen login page with animated grid backdrop and editorial image panel block

Sign-in page pairing an email or username and password form with show/hide toggle and Google plus Apple buttons over a masked animated grid and a full-height p…

npx shadcn@latest add https://reui.io/r/{style}/auth-1.json
Split magic-link sign-in with a framed testimonial and customer logo wall trust… block

Split passwordless login: magic-link email field plus Google, Apple, and GitHub SSO, beside a Frame trust card with a star-rated testimonial and brand logo wal…

npx shadcn@latest add https://reui.io/r/{style}/auth-10.json
Split-screen login with testimonial sidebar and animated dot backdrop block

Two-column login: email or username plus password with show/hide toggle, Google and Apple buttons, and a sidebar with a star-rated testimonial and trust-brand …

npx shadcn@latest add https://reui.io/r/{style}/auth-11.json
Split login method picker with passkey, SAML SSO, and a framed brand-logo testi… block

Login with Google, email, WebAuthn passkey, SAML SSO, and backup code, a two-step email reveal, and a framed sidebar with an animated brand-logo grid and rotat…

npx shadcn@latest add https://reui.io/r/{style}/auth-12.json
Split-screen magic-link sign-in with left image sidebar and social login buttons block

Magic-link login page: work email field sends a secure sign-in link, plus Google, Apple, and GitHub social buttons. Two-column split with a full-cover image si…

npx shadcn@latest add https://reui.io/r/{style}/auth-13.json
Split-screen workspace sign-in with animated stacked media panel and social SSO block

Two-column workspace login page: email and password with show/hide toggle, forgot-password, and Google, Apple, GitHub SSO buttons beside an auto-cycling stacke…

npx shadcn@latest add https://reui.io/r/{style}/auth-14.json
Centered magic-link email login with logo, social sign-in buttons, and legal fo… block

Passwordless email login that sends a magic link, plus Google, Apple, and GitHub sign-in and a terms and copyright footer. Built with ReUI InputGroup, Field, B…

npx shadcn@latest add https://reui.io/r/{style}/auth-15.json
Full-page sign-in with app header, SSO and email-continue form, and customer lo… block

Single-column sign-in: app header with create-workspace link, centered Google, GitHub, and SSO buttons over one work-email Continue field, plus a footer custom…

npx shadcn@latest add https://reui.io/r/{style}/auth-16.json
Centered login method picker with WebAuthn passkey sign-in and email reveal step block

Two-step sign-in: a centered method picker (Google, email, SAML SSO, passkey, backup code) that reveals an email field, with real WebAuthn passkey auth and toa…

npx shadcn@latest add https://reui.io/r/{style}/auth-17.json
Split-screen sign-in with testimonial sidebar, social login, and password show/… block

Two-column login: email or username field, password Input with show/hide toggle, Google and Apple buttons, plus a testimonial and trust-brand sidebar. Uses ReU…

npx shadcn@latest add https://reui.io/r/{style}/auth-18.json
Passwordless workspace sign-in page with magic-link work email and Google plus … block

Full-page login screen that emails a secure sign-in link to an approved work address, with Google and GitHub OAuth buttons above an or divider. Built from ReUI…

npx shadcn@latest add https://reui.io/r/{style}/auth-19.json
Split-screen login with an autoplay founder testimonial carousel and Trustpilot… block

Email or username and password sign-in with show/hide toggle and Google, Apple, GitHub buttons, beside a dark panel with an autoplay founder testimonial carous…

npx shadcn@latest add https://reui.io/r/{style}/auth-2.json
Centered sign-in card with Google and Apple buttons, password visibility toggle… block

Login page with social sign-in (Google, Apple), an email or username field, and a show or hide password toggle, plus forgot-password and create-account links. …

npx shadcn@latest add https://reui.io/r/{style}/auth-20.json
Split-screen magic-link sign-in with testimonial and trust-brand sidebar on a d… block

Passwordless magic-link sign-in with a single work-email field and Google, Apple, GitHub buttons, beside a testimonial and trust-brand sidebar on a twinkling d…

npx shadcn@latest add https://reui.io/r/{style}/auth-3.json
Framed password sign-in card with email or username, social provider row, and f… block

Login on a noise-textured background: ReUI Frame card with email-or-username and password fields, show/hide toggle, full-width submit, plus a Google/Apple/GitH…

npx shadcn@latest add https://reui.io/r/{style}/auth-4.json
Split-screen marketing trial signup page with animated gradient blob background… block

Full-page registration with a marketing hero, OAuth buttons (Google, GitHub), email and show/hide password fields, and a brand logo trust strip over drifting g…

npx shadcn@latest add https://reui.io/r/{style}/auth-5.json
Split-screen login with social OAuth and testimonial sidebar over an animated g… block

Two-column sign-in page: email or username, password with show/hide toggle, Forgot password, and Google/Apple/GitHub OAuth, beside a customer testimonial and b…

npx shadcn@latest add https://reui.io/r/{style}/auth-6.json
Blueprint-framed passwordless sign-in card with magic-link email and customer t… block

Centered dark magic-link sign-in: email field sends a sign-in link, with Google, Apple and GitHub OAuth, a dashed crosshair-cornered frame, and a customer logo…

npx shadcn@latest add https://reui.io/r/{style}/auth-7.json
Centered Frame login card over a softened photo backdrop with social provider s… block

Single-card sign-in centered on a blurred Unsplash photo with noise grain: email or username and password fields, show/hide toggle, Forgot password, and Google…

npx shadcn@latest add https://reui.io/r/{style}/auth-8.json
Split magic-link sign-in with an animated brand-logo grid sidebar and rotating … block

Split passwordless login: a work-email field emails a 15-minute magic link, with Google, Apple, GitHub buttons, beside a sidebar of brand logos animating in a …

npx shadcn@latest add https://reui.io/r/{style}/auth-9.json
Autocomplete ui
npx shadcn@latest add https://reui.io/r/{style}/autocomplete.json
Badge ui
npx shadcn@latest add https://reui.io/r/{style}/badge.json
Blog index with cover-image post cards in a responsive three-column grid and au… block

Blog listing on a responsive 1/2/3-column grid of Cards: 16:10 cover, date and read-time, clamped title and excerpt, author footer with Avatar and Read link. B…

npx shadcn@latest add https://reui.io/r/{style}/blog-1.json
Full-image blog post cards with titles overlaid on covers, hover zoom, and pill… block

Blog index of three full-bleed cover-image cards with a gradient scrim, title and tone label overlaid on the photo, a white pill category Badge, and hover zoom…

npx shadcn@latest add https://reui.io/r/{style}/blog-2.json
Blog article carousel with cover cards, circular prev/next controls and a progr… block

Featured-article blog carousel with circular prev/next buttons and a 1px progress line as position indicator. Cover scales on hover; category badge and read ti…

npx shadcn@latest add https://reui.io/r/{style}/blog-3.json
Three-column blog index with stacked Frame cards, grayscale hover-zoom covers, … block

Blog index listing posts as stacked ReUI Frame cards in a three-column row: grayscale cover that zooms on hover, category, date, title, excerpt, and an author …

npx shadcn@latest add https://reui.io/r/{style}/blog-4.json
Blog post detail page with gradient overlay image hero, byline, pull quote, and… block

Reading page for one blog post, news, changelog, or case study. Cover with gradient scrim, overlaid title and category badge, byline, sections, pull quote, aut…

npx shadcn@latest add https://reui.io/r/{style}/blog-5.json
Single-column blog post detail page with breadcrumb, author byline, topic badge… block

Centered max-w-3xl blog post detail page: breadcrumb, headline, author byline, cover image, body sections, topic badges, and a two-up Read Next grid of related…

npx shadcn@latest add https://reui.io/r/{style}/blog-6.json
A basic single-expand accordion block

A basic single-expand accordion

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-1.json
Accordion with rotating arrow indicator block

Accordion with rotating arrow indicator

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-10.json
Accordion component for onboarding or setup steps with icons, badges, and QR co… block

Accordion component for onboarding or setup steps with icons, badges, and QR codes

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-11.json
Accordion with plus/minus indicators block

Accordion with plus/minus indicators

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-2.json
Accordion with borders and rounded corners block

Accordion with borders and rounded corners

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-3.json
Accordion embedded within a Card block

Accordion embedded within a Card

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-4.json
Accordion with disabled items and highlighted state block

Accordion with disabled items and highlighted state

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-5.json
Advanced accordion with custom icons and badges block

Advanced accordion with custom icons and badges

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-6.json
Accordion items integrated within Frame and FramePanel block

Accordion items integrated within Frame and FramePanel

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-7.json
Nested accordion example with bordered items block

Nested accordion example with bordered items

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-8.json
User list accordion with avatars and role indicators block

User list accordion with avatars and role indicators

npx shadcn@latest add https://reui.io/r/{style}/c-accordion-9.json
Basic alert block

Basic alert

npx shadcn@latest add https://reui.io/r/{style}/c-alert-1.json
Alert with icon and action buttons block

Alert with icon and action buttons

npx shadcn@latest add https://reui.io/r/{style}/c-alert-10.json
Alert with description and action buttons block

Alert with description and action buttons

npx shadcn@latest add https://reui.io/r/{style}/c-alert-11.json
Alert integrated within a Frame with reset borders block

Alert integrated within a Frame with reset borders

npx shadcn@latest add https://reui.io/r/{style}/c-alert-12.json
Stacked alerts within a Frame block

Stacked alerts within a Frame

npx shadcn@latest add https://reui.io/r/{style}/c-alert-13.json
Alert with actions integrated within a Frame block

Alert with actions integrated within a Frame

npx shadcn@latest add https://reui.io/r/{style}/c-alert-14.json
Inverted alert variant block

Inverted alert variant

npx shadcn@latest add https://reui.io/r/{style}/c-alert-15.json
Urgent billing notice block

Urgent billing notice

npx shadcn@latest add https://reui.io/r/{style}/c-alert-16.json
Service status summary stacked within a frame block

Service status summary stacked within a frame

npx shadcn@latest add https://reui.io/r/{style}/c-alert-17.json
Feature discovery alert block

Feature discovery alert

npx shadcn@latest add https://reui.io/r/{style}/c-alert-18.json
User message notification alert block

User message notification alert

npx shadcn@latest add https://reui.io/r/{style}/c-alert-19.json
Alert with icon block

Alert with icon

npx shadcn@latest add https://reui.io/r/{style}/c-alert-2.json
User message notification alert block

User message notification alert

npx shadcn@latest add https://reui.io/r/{style}/c-alert-20.json
Alert with icon and action buttons block

Alert with icon and action buttons

npx shadcn@latest add https://reui.io/r/{style}/c-alert-3.json
Destructive alert with icon and action buttons block

Destructive alert with icon and action buttons

npx shadcn@latest add https://reui.io/r/{style}/c-alert-4.json
Info alert with icon and action buttons block

Info alert with icon and action buttons

npx shadcn@latest add https://reui.io/r/{style}/c-alert-5.json
Success alert block

Success alert

npx shadcn@latest add https://reui.io/r/{style}/c-alert-6.json
Warning alert block

Warning alert

npx shadcn@latest add https://reui.io/r/{style}/c-alert-7.json
Error alert block

Error alert

npx shadcn@latest add https://reui.io/r/{style}/c-alert-8.json
Invert alert block

Invert alert

npx shadcn@latest add https://reui.io/r/{style}/c-alert-9.json
Basic alert dialog with title, description, and action buttons block

Basic alert dialog with title, description, and action buttons

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-1.json
Confirmation for successful e-ticket registration block

Confirmation for successful e-ticket registration

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-10.json
System update notification requiring application restart block

System update notification requiring application restart

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-11.json
Billing warning for expired subscriptions or failed payments block

Billing warning for expired subscriptions or failed payments

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-12.json
Logout confirmation dialog block

Logout confirmation dialog

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-13.json
Advanced security audit confirmation block

Advanced security audit confirmation

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-14.json
Small size alert dialog for quick confirmations block

Small size alert dialog for quick confirmations

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-2.json
Alert dialog with icon block

Alert dialog with icon

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-3.json
Small size alert dialog with media (icon) block

Small size alert dialog with media (icon)

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-4.json
Destructive alert dialog for irreversible actions like deletion block

Destructive alert dialog for irreversible actions like deletion

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-5.json
Alert dialog nested within a standard Dialog component block

Alert dialog nested within a standard Dialog component

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-6.json
Task success confirmation block

Task success confirmation

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-7.json
Account deactivation confirmation block

Account deactivation confirmation

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-8.json
Warning for unsaved changes when navigating away block

Warning for unsaved changes when navigating away

npx shadcn@latest add https://reui.io/r/{style}/c-alert-dialog-9.json
16:9 widescreen aspect ratio block

16:9 widescreen aspect ratio

npx shadcn@latest add https://reui.io/r/{style}/c-aspect-ratio-1.json
4:3 standard aspect ratio block

4:3 standard aspect ratio

npx shadcn@latest add https://reui.io/r/{style}/c-aspect-ratio-2.json
1:1 square aspect ratio block

1:1 square aspect ratio

npx shadcn@latest add https://reui.io/r/{style}/c-aspect-ratio-3.json
21:9 ultrawide aspect ratio block

21:9 ultrawide aspect ratio

npx shadcn@latest add https://reui.io/r/{style}/c-aspect-ratio-4.json
9:16 portrait aspect ratio block

9:16 portrait aspect ratio

npx shadcn@latest add https://reui.io/r/{style}/c-aspect-ratio-5.json
3:2 classic photography aspect ratio block

3:2 classic photography aspect ratio

npx shadcn@latest add https://reui.io/r/{style}/c-aspect-ratio-6.json
4:5 social media portrait aspect ratio block

4:5 social media portrait aspect ratio

npx shadcn@latest add https://reui.io/r/{style}/c-aspect-ratio-7.json
16:10 computer monitor aspect ratio block

16:10 computer monitor aspect ratio

npx shadcn@latest add https://reui.io/r/{style}/c-aspect-ratio-8.json
Basic autocomplete control block

Basic autocomplete control

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-1.json
Small autocomplete block

Small autocomplete

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-10.json
Large autocomplete block

Large autocomplete

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-11.json
Form integration block

Form integration

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-12.json
Disabled state block

Disabled state

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-2.json
Auto highlight option as you type block

Auto highlight option as you type

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-3.json
Control with label block

Control with label

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-4.json
With clear button block

With clear button

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-5.json
With trigger button block

With trigger button

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-6.json
With clear and trigger buttons block

With clear and trigger buttons

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-7.json
With groups and labels block

With groups and labels

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-8.json
With search results block

With search results

npx shadcn@latest add https://reui.io/r/{style}/c-autocomplete-9.json
Basic avatar block

Basic avatar

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-1.json
Basic avatar group block

Basic avatar group

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-10.json
Avatar group with numerical count block

Avatar group with numerical count

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-11.json
Avatar group with an icon count block

Avatar group with an icon count

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-12.json
Avatar with a distinct border ring block

Avatar with a distinct border ring

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-13.json
Avatar with light background color fallback block

Avatar with light background color fallback

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-14.json
Avatar with a solid background color fallback block

Avatar with a solid background color fallback

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-15.json
Avatar with user details and badge block

Avatar with user details and badge

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-16.json
Avatar with grayscale image filter block

Avatar with grayscale image filter

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-17.json
Avatar group with online status on one block

Avatar group with online status on one

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-18.json
Avatar inside small outline button block

Avatar inside small outline button

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-19.json
Avatar with fallback block

Avatar with fallback

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-2.json
Avatar social proof with text label block

Avatar social proof with text label

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-20.json
Compact social proof with initials block

Compact social proof with initials

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-21.json
Avatar group with hover tooltips and lift effect block

Avatar group with hover tooltips and lift effect

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-22.json
Avatar group with hover effect block

Avatar group with hover effect

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-23.json
Avatar group with hover effect and tooltips block

Avatar group with hover effect and tooltips

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-24.json
Avatar group with numerical count block

Avatar group with numerical count

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-25.json
Pilled small outline button with avatar block

Pilled small outline button with avatar

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-26.json
Pilled small button with avatar block

Pilled small button with avatar

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-27.json
Avatar inside an empty state example block

Avatar inside an empty state example

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-28.json
Avatar group with icon count and button block

Avatar group with icon count and button

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-29.json
Avatars with different sizes block

Avatars with different sizes

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-3.json
Avatar with loading state demonstration block

Avatar with loading state demonstration

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-30.json
Avatar with custom badge block

Avatar with custom badge

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-31.json
Avatar with ring animation block

Avatar with ring animation

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-32.json
Avatar with gradient animated ring block

Avatar with gradient animated ring

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-33.json
Avatar with multiple badges block

Avatar with multiple badges

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-34.json
Compact avatar dropdown menu block

Compact avatar dropdown menu

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-35.json
Avatars with different border radiuses block

Avatars with different border radiuses

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-4.json
Avatars with custom sizes block

Avatars with custom sizes

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-5.json
Avatar with an online status badge block

Avatar with an online status badge

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-6.json
Avatar with badge icon block

Avatar with badge icon

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-7.json
Avatar with different badge positions block

Avatar with different badge positions

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-8.json
Avatar with different badge positions block

Avatar with different badge positions

npx shadcn@latest add https://reui.io/r/{style}/c-avatar-9.json
Default badge block

Default badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-1.json
Info outline badge block

Info outline badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-10.json
Success outline badge block

Success outline badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-11.json
Warning outline badge block

Warning outline badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-12.json
Primary light badge block

Primary light badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-13.json
Destructive light badge block

Destructive light badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-14.json
Success light badge block

Success light badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-15.json
Info light badge block

Info light badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-16.json
Warning light badge block

Warning light badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-17.json
Badge size variations block

Badge size variations

npx shadcn@latest add https://reui.io/r/{style}/c-badge-18.json
Badge with full radius (radius="full") block

Badge with full radius (radius="full")

npx shadcn@latest add https://reui.io/r/{style}/c-badge-19.json
Secondary badge block

Secondary badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-2.json
Badge with an icon block

Badge with an icon

npx shadcn@latest add https://reui.io/r/{style}/c-badge-20.json
Badge with a dismiss button block

Badge with a dismiss button

npx shadcn@latest add https://reui.io/r/{style}/c-badge-21.json
Badge with a status dot block

Badge with a status dot

npx shadcn@latest add https://reui.io/r/{style}/c-badge-22.json
Badge rendered as a link block

Badge rendered as a link

npx shadcn@latest add https://reui.io/r/{style}/c-badge-23.json
Badge with avatar block

Badge with avatar

npx shadcn@latest add https://reui.io/r/{style}/c-badge-24.json
Badge with flag image block

Badge with flag image

npx shadcn@latest add https://reui.io/r/{style}/c-badge-25.json
Destructive badge block

Destructive badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-3.json
Success badge block

Success badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-4.json
Info badge block

Info badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-5.json
Warning badge block

Warning badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-6.json
Outline badge block

Outline badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-7.json
Primary outline badge block

Primary outline badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-8.json
Destructive outline badge block

Destructive outline badge

npx shadcn@latest add https://reui.io/r/{style}/c-badge-9.json
Basic breadcrumb block

Basic breadcrumb

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-1.json
Pill-style breadcrumb inside frame block

Pill-style breadcrumb inside frame

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-10.json
Breadcrumb items containing badge with count block

Breadcrumb items containing badge with count

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-11.json
Breadcrumb starting with home icon item block

Breadcrumb starting with home icon item

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-12.json
Breadcrumb with a custom separator block

Breadcrumb with a custom separator

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-13.json
Button-style breadcrumb block

Button-style breadcrumb

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-14.json
Breadcrumb with project, user and document info block

Breadcrumb with project, user and document info

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-15.json
Breadcrumb with dropdown menu block

Breadcrumb with dropdown menu

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-2.json
Breadcrumb with Next.js link block

Breadcrumb with Next.js link

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-3.json
Breadcrumb with a custom slash separator block

Breadcrumb with a custom slash separator

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-4.json
Breadcrumb with icons for each item block

Breadcrumb with icons for each item

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-5.json
Breadcrumb with ellipsis for long paths block

Breadcrumb with ellipsis for long paths

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-6.json
Breadcrumb items with avatars block

Breadcrumb items with avatars

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-7.json
Breadcrumb with double chevron separators block

Breadcrumb with double chevron separators

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-8.json
Breadcrumb inside card block

Breadcrumb inside card

npx shadcn@latest add https://reui.io/r/{style}/c-breadcrumb-9.json
Default button block

Default button

npx shadcn@latest add https://reui.io/r/{style}/c-button-1.json
Disabled button block

Disabled button

npx shadcn@latest add https://reui.io/r/{style}/c-button-10.json
Icon button block

Icon button

npx shadcn@latest add https://reui.io/r/{style}/c-button-11.json
Button with an icon on the right block

Button with an icon on the right

npx shadcn@latest add https://reui.io/r/{style}/c-button-12.json
Button in a loading state block

Button in a loading state

npx shadcn@latest add https://reui.io/r/{style}/c-button-13.json
Button with an icon on the left block

Button with an icon on the left

npx shadcn@latest add https://reui.io/r/{style}/c-button-14.json
Button with an invalid state highlight block

Button with an invalid state highlight

npx shadcn@latest add https://reui.io/r/{style}/c-button-15.json
Secondary button with an icon on the left block

Secondary button with an icon on the left

npx shadcn@latest add https://reui.io/r/{style}/c-button-16.json
Secondary button with an icon on the right block

Secondary button with an icon on the right

npx shadcn@latest add https://reui.io/r/{style}/c-button-17.json
Outline button with an icon on the left block

Outline button with an icon on the left

npx shadcn@latest add https://reui.io/r/{style}/c-button-18.json
Outline button with an icon on the right block

Outline button with an icon on the right

npx shadcn@latest add https://reui.io/r/{style}/c-button-19.json
Secondary button block

Secondary button

npx shadcn@latest add https://reui.io/r/{style}/c-button-2.json
Ghost button with an icon on the left block

Ghost button with an icon on the left

npx shadcn@latest add https://reui.io/r/{style}/c-button-20.json
Ghost button with an icon on the right block

Ghost button with an icon on the right

npx shadcn@latest add https://reui.io/r/{style}/c-button-21.json
Destructive button with an icon on the left block

Destructive button with an icon on the left

npx shadcn@latest add https://reui.io/r/{style}/c-button-22.json
Destructive button with an icon on the right block

Destructive button with an icon on the right

npx shadcn@latest add https://reui.io/r/{style}/c-button-23.json
Extra small icon button block

Extra small icon button

npx shadcn@latest add https://reui.io/r/{style}/c-button-24.json
Small icon button block

Small icon button

npx shadcn@latest add https://reui.io/r/{style}/c-button-25.json
Large (lg) icon-only button block

Large (lg) icon-only button

npx shadcn@latest add https://reui.io/r/{style}/c-button-26.json
Button rendered as a Next.js Link block

Button rendered as a Next.js Link

npx shadcn@latest add https://reui.io/r/{style}/c-button-27.json
Link button with an icon on the left block

Link button with an icon on the left

npx shadcn@latest add https://reui.io/r/{style}/c-button-28.json
Link button with an icon on the right block

Link button with an icon on the right

npx shadcn@latest add https://reui.io/r/{style}/c-button-29.json
Outline button block

Outline button

npx shadcn@latest add https://reui.io/r/{style}/c-button-3.json
Large button with an icon on the left block

Large button with an icon on the left

npx shadcn@latest add https://reui.io/r/{style}/c-button-30.json
Large button with an icon on the right block

Large button with an icon on the right

npx shadcn@latest add https://reui.io/r/{style}/c-button-31.json
Outline button with an invalid state block

Outline button with an invalid state

npx shadcn@latest add https://reui.io/r/{style}/c-button-32.json
Ghost button with an invalid state block

Ghost button with an invalid state

npx shadcn@latest add https://reui.io/r/{style}/c-button-33.json
Button with an icon on the left block

Button with an icon on the left

npx shadcn@latest add https://reui.io/r/{style}/c-button-34.json
Ghost button with more/less toggle block

Ghost button with more/less toggle

npx shadcn@latest add https://reui.io/r/{style}/c-button-35.json
Social login buttons with Remix Icons block

Social login buttons with Remix Icons

npx shadcn@latest add https://reui.io/r/{style}/c-button-36.json
Outline like button with count block

Outline like button with count

npx shadcn@latest add https://reui.io/r/{style}/c-button-37.json
Star button with count block

Star button with count

npx shadcn@latest add https://reui.io/r/{style}/c-button-38.json
Button with an unread badge block

Button with an unread badge

npx shadcn@latest add https://reui.io/r/{style}/c-button-39.json
Ghost button block

Ghost button

npx shadcn@latest add https://reui.io/r/{style}/c-button-4.json
Button with icon, label, and shortcut keys block

Button with icon, label, and shortcut keys

npx shadcn@latest add https://reui.io/r/{style}/c-button-40.json
Copy button with feedback block

Copy button with feedback

npx shadcn@latest add https://reui.io/r/{style}/c-button-41.json
Icon-only copy button with feedback block

Icon-only copy button with feedback

npx shadcn@latest add https://reui.io/r/{style}/c-button-42.json
Animated hamburger / close toggle button block

Animated hamburger / close toggle button

npx shadcn@latest add https://reui.io/r/{style}/c-button-43.json
Async action button with loading and success states block

Async action button with loading and success states

npx shadcn@latest add https://reui.io/r/{style}/c-button-44.json
Outline button with inline count badge block

Outline button with inline count badge

npx shadcn@latest add https://reui.io/r/{style}/c-button-45.json
Button with status dot badge block

Button with status dot badge

npx shadcn@latest add https://reui.io/r/{style}/c-button-46.json
Ghost button with a status badge block

Ghost button with a status badge

npx shadcn@latest add https://reui.io/r/{style}/c-button-47.json
Icon button with notification badge block

Icon button with notification badge

npx shadcn@latest add https://reui.io/r/{style}/c-button-48.json
Go back link button block

Go back link button

npx shadcn@latest add https://reui.io/r/{style}/c-button-49.json
Destructive button block

Destructive button

npx shadcn@latest add https://reui.io/r/{style}/c-button-5.json
Go back link button with animation block

Go back link button with animation

npx shadcn@latest add https://reui.io/r/{style}/c-button-50.json
Expanding button from icon to label block

Expanding button from icon to label

npx shadcn@latest add https://reui.io/r/{style}/c-button-51.json
Multi-line button with icon, title & description block

Multi-line button with icon, title & description

npx shadcn@latest add https://reui.io/r/{style}/c-button-52.json
Sliding Icon Button (Hover reveal) block

Sliding Icon Button (Hover reveal)

npx shadcn@latest add https://reui.io/r/{style}/c-button-53.json
Shortcut Tooltip Button (Kbd hints) block

Shortcut Tooltip Button (Kbd hints)

npx shadcn@latest add https://reui.io/r/{style}/c-button-54.json
Button with avatar block

Button with avatar

npx shadcn@latest add https://reui.io/r/{style}/c-button-55.json
Outline button with avatar block

Outline button with avatar

npx shadcn@latest add https://reui.io/r/{style}/c-button-56.json
Small button with avatar block

Small button with avatar

npx shadcn@latest add https://reui.io/r/{style}/c-button-57.json
Small outline button with avatar block

Small outline button with avatar

npx shadcn@latest add https://reui.io/r/{style}/c-button-58.json
Social login buttons with Remix icons block

Social login buttons with Remix icons

npx shadcn@latest add https://reui.io/r/{style}/c-button-59.json
Link button variant block

Link button variant

npx shadcn@latest add https://reui.io/r/{style}/c-button-6.json
Social icon-only buttons with Remix icons block

Social icon-only buttons with Remix icons

npx shadcn@latest add https://reui.io/r/{style}/c-button-60.json
Theme toggle button with animated moon and sun icons block

Theme toggle button with animated moon and sun icons

npx shadcn@latest add https://reui.io/r/{style}/c-button-61.json
Extra small button block

Extra small button

npx shadcn@latest add https://reui.io/r/{style}/c-button-7.json
Small button block

Small button

npx shadcn@latest add https://reui.io/r/{style}/c-button-8.json
Large button block

Large button

npx shadcn@latest add https://reui.io/r/{style}/c-button-9.json