Shadcn Dashboard is a collection of modern, production-ready dashboard layouts, components, and UI patterns built on top of shadcn/ui and Tailwind CSS. It’s designed to help developers build clean, scalable, and data-driven dashboards faster—without compromising on performance, accessibility, or customization.
File attachment in the idle state, with the primitive's built-in dashed border, a ready-to-upload message, and an upload action
File attachment in the uploading state, with a spinner in place of the file icon, a shimmering title, and a cancel action
File attachment in the error state, with an alert icon, a failure message, and a retry action, using the primitive's built-in destructive styling
File attachment in the done state, with a checkmark icon, the final file size, and a remove action
Horizontally scrolling row of mixed attachments, an image thumbnail alongside spreadsheet, document, and archive file cards, each with a remove action
File attachment whose whole surface opens a preview dialog via AttachmentTrigger, with a remove action that stays independently clickable above it
Default autocomplete component
Autocomplete component with different size variants
Autocomplete with vanish animation
Autocomplete with grouped team members, avatars, status dots, and spring-animated list items
Autocomplete with debounced async search, loading spinner, error handling, avatars, and spring-animated results
Autocomplete for selecting a project type with unique icons, selected icon shown in input, and spring-animated list items
Default avatar component
Group avatar component
Badge avatar component
Border avatar component
Counter avatar component
Fallback avatar component
Animated selectable avatar button with optional badge and name label
Stacked avatar group with overflow count and popularity indicator
Avatars with online, away, do not disturb, and offline status badges, a grayscale offline photo, and status labels.
Profile photo uploader with instant preview, a camera hover overlay, file type and size validation, and a remove option that falls back to initials.
Avatar group with name tooltips on hover and a +N counter that opens a popover listing the remaining members and their roles.
Instagram style story row with gradient rings for new stories, gray rings once viewed, an add story button, and a new story count.
Initials avatars with a color picked from the name, so each person keeps the same color, shown in three sizes and a square shape.
Badge component
Badge component
Badge component
Badge component
Badge component
Badge component
Animated success badge with top glow and letter-by-letter reveal
Animated pending badge with spinning loader and top glow
Animated failed badge with top glow and letter-by-letter reveal
A stacked bar chart with multiple series and legend
A bar chart with positive and negative values
A bar chart with profit/loss and negative values
A stacked bar chart with legend
A bar chart with active state highlighting
A horizontal bar chart
A grouped bar chart with multiple series
Breadcrumb component
Breadcrumb component
Breadcrumb component
Breadcrumb component
Breadcrumb component
Breadcrumb component
All seven Bubble color variants stacked for comparison: default, secondary, muted, tinted, outline, ghost, and destructive