Shadcn Application Blocks
Build product UI with 500 Application blocks for shadcn/ui. Dashboards, data tables, settings, auth, billing, and onboarding, ready to wire to your data.
Application Chart: Heatmap Calendar Chart
CSS grid calendar heatmap shading daily activity by foreground opacity across a six month window.
Application Developer Tool: Webhook Logs Table
Webhook delivery log with event name, endpoint, HTTP status badge, duration, attempt ratio, and inline response body for failed rows.
Application Filters and Search: Multi Facet Panel
Faceted filter sidebar with collapsible groups for Status, Owner, Label, and Date, with checkbox value lists and hit counts.
Application Empty State: Rate Limited State
Rate limit panel showing the 60 requests per minute cap, the reset time, and upgrade or support paths to increase the limit.
Application Inbox and Email: Quick Reply Blueprint
Static open-state blueprint of a compact inline reply composer with canned-reply chips and an edit-before-sending note.
Application Navigation: Tab Bar Mobile
Mobile bottom tab bar with five thumb-sized tabs, one active indicator, and a notification badge rendered in a phone frame context strip.
Application AI Assistant: Inline Suggestion Card
Text editor surface showing an AI ghost-text completion with Tab to accept and Esc to dismiss keyboard hints and an authorship notice.
Application Chat and Messaging: Emoji Reactions Blueprint
Static open-state emoji picker inline above a message with a recents row, category grid, search input, and existing reaction chips.
Application Maps and Location: Territory List
Sales territory table with static map thumbs, assigned rep avatars, account counts, and an assign affordance for unassigned rows.
Application Calendar and Scheduling: Recurring Event Form
Recurrence rule builder with interval input, weekday toggle chips, end condition selector, and a plain-English rule summary.
Application Workflow and Automation: Run Detail Panel
Automation run debugger showing the run header, a per step status list, and the input and output of the failed step expanded.
Application Pricing and Plan: Billing Period Toggle
Billing period switcher with monthly and yearly cards showing effective monthly price, a savings badge on yearly, and the selected state highlighted.
Application AI Assistant: Feedback Thumbs Row
AI response feedback row with thumbs up and down, a copy and regenerate action, and a reason picker revealed on negative feedback.
Application Timeline and Roadmap: Dependency List
Roadmap item dependency panel with blocked-by and blocking sections, each row showing status and an inline blocking note.
Application Pricing and Plan: Feature Gate Card
Locked feature placeholder card naming the required plan, describing the feature, listing plan highlights, and offering an upgrade CTA or an ask your admin note.
Application Comments and Annotation: Mention Picker Blueprint
Static open state of an at mention picker showing six workspace members with one row highlighted and keyboard navigation hints.
Application Admin and Moderation: Content Flags Table
Moderation flags overview table with content snippets, flag reasons, sortable flag counts, status badges, and per-row review actions.
Application Help and Support: Canned Responses Blueprint
Static open-state blueprint of a saved replies picker beside a reply composer, with a searchable snippet list and one highlighted row ready to insert.
Application Chat and Messaging: Channel Settings Panel
Channel settings panel with name and topic fields, public/private radio with consequence notes, a members list, notification level selector, and an archive action.
Application Maps and Location: Distance Radius Card
Static map blueprint with a dashed SVG radius circle, a stepped radius control, and a count of locations within the selected distance.
Application Workflow and Automation: Automation Error Card
Failed automation card with the error in plain words, a retry meter showing attempts used and remaining, and a payload replay affordance.
Application Admin and Moderation: Audit Search Panel
Compliance audit log with actor, action type, and date range filters, monospace action chips, IP column, and CSV export.
Application Tasks and Todo: Task Comments Panel
Task discussion thread with avatar bubbles, timestamps, emoji reactions, an inline status-change event, and a composer with mention and task-link hints.
Application Status and Health: Past Incidents List
Resolved incidents grouped by month with duration, impact summary, and a postmortem link per row.
Application Help and Support: Ticket List
Agent support queue showing ticket subject, requester avatar, status and priority badges, last update time, and assigned agent with a filter strip.
Application Tasks and Todo: Priority Matrix
Eisenhower-style 2x2 grid with task chips in each urgency and importance quadrant, per-quadrant counts, and a note that Do Now should be the emptiest column.
Application Status and Health: Component Status List
Editable internal status list with a per-row Select for Operational, Degraded, Partial outage, or Down and a publish to status page action.
Application Media and Gallery: Bulk Media Actions
Media bulk-ops toolbar showing selection count with Move, Tag, Download, and Delete actions and a clear-selection affordance.
Application Developer Tool: Secrets Rotation Card
Secret rotation panel listing active secrets with age nudges, masked prefixes, and a rotate button that keeps the old secret valid for 24 hours.
Application Integration: Incoming Webhook Setup
Incoming webhook setup panel with a generated endpoint URL, masked signing secret, accepted event types, and a JSON payload sample.
Application Profile and Account: Data Download Card
Personal data export card listing exactly what is included, the zip plus JSON delivery format, a minutes-not-days timing promise, and a not-collected reassurance section.
Application Media and Gallery: Folder Breadcrumb Bar
Media folder toolbar with a clickable path, grid and list view toggle, sort picker, and New Folder and Upload actions.
Application Report: Scheduled Report Form
Form to schedule a report delivery with frequency, run time, a tag-style recipient list, format radios, and a no-reply address notice.
Application Notification: Realtime Toast Blueprint
Static blueprint of a live comment toast with avatar, quoted body, view action, and an auto-dismiss timer track.
Application Comments and Annotation: Comment Composer
Standalone comment composer with a formatting toolbar, file attach, at mention hint, and a Cmd Enter keyboard shortcut hint.
Application Integration: Oauth Scopes Review
OAuth permissions audit panel listing each app scope with a plain-English description, risk level, and a per-scope revoke affordance.
Application Report: Saved Reports List
Table of saved reports with creator, last run time, a schedule chip when scheduled, and per-row run, share, and options actions.
Application Teams and Org: Pending Invites List
Table of outstanding invites with email, role, sent date, sender avatar, days until expiry, and per row resend and revoke actions.
Application Integration: Integration Health Card
Per-integration health panel showing connected status, last sync time, sync frequency, error count, and a five-run sync history.
Application Tasks and Todo: Subtask Tree
Nested subtask view with two levels of indented checkboxes, expand chevrons on parent nodes, and a progress bar that rolls up only leaf-node completion.
Application Timeline and Roadmap: Quarter Planner
Q3 roadmap grid with CSS span bars, capacity hints, and status badges for 8 initiatives across 5 teams.
Application Teams and Org: Invite Members Form
Bulk invite form with a tag email input, role select, optional message, and seat consequence note before sending.
Application Data Table: Nested Detail Table
Projects table where one row expands inline to a key value metadata panel and a recent activity list.
Application Filters and Search: Applied Filters Summary
Active filter summary bar that renders the current filter state as a plain sentence with removable tokens and a result count.
Application Inbox and Email: Bulk Actions Toolbar
Email list with a contextual toolbar showing Archive, Mark read, Label, Snooze, and Delete when messages are selected.
Application Profile and Account: Two Factor Status Card
Two-factor authentication status panel showing the active method, backup codes remaining, and an enrollment prompt with the security case for new accounts.
Application Data Table: Csv Preview Table
CSV import preview with column to field mapping Selects, an unmapped column flag, and a row issue count.
Application App Shell: Centered Content Shell
A slim top bar and a max-w-3xl reading column on a muted background for docs, articles, or single settings detail pages.
Application Profile and Account: Away Status Card
Status setter card with four presence options, a custom message field, a clear-after duration picker, and a note on when Do Not Disturb actually silences alerts.
Application Filters and Search: Recent And Saved Blueprint
Static open state of a search dropdown with recent queries, named saved searches, and a keyboard hint footer.
Application Navigation: Help Menu Blueprint
Static open-state help menu with a docs search field, five action rows including keyboard shortcuts and a changelog unread dot, and a status footer.
Application App Shell: Tabbed Page Shell
A full-page shell with a sidebar, a named resource header, and a horizontal tab row delivering sub-view content below.
Application Activity: Team Pulse Card
Weekly team activity summary with commit, comment, and task stats, inline sparklines, and a most-active member row.
Application Setting: Branding Settings
Workspace branding panel with logo upload, accent color swatches, a subdomain field, and an honest note on where branding actually appears.
Application Data Table: Multi Select Toolbar Table
Contacts table with per row checkboxes, a select all header, and a contextual bulk action toolbar.
Application Form: Payment Details Form
Card payment form with number, expiry, CVC, postal code, a save card toggle, and a processor security note.
Application Navigation: Section Switcher
Pill-style segmented toggle for switching in-page views with a per-segment item count, shown in mailbox and calendar range examples.
Application Activity: Pinned Updates Card
Announcements widget showing three pinned workspace updates with author, tag badge, body text, and an unpin action.
Application Form: Date Range Form
Date range input with preset chips, from and to fields, a resolved range summary, and a workspace timezone note.
Application Auth Page: Email Changed Confirm
Email change confirmation page showing the new and old address with timestamp and device, a lock account alarm for unauthorized changes, and a dual address notice.
Application Stat Card: Streak Card
A consistency card showing a current streak count, an inline SVG week-row of filled and empty day cells, and supporting stats.
Application Accessibility: Screen Reader Labels Table
Accessible name audit table listing Acme workspace UI elements with their computed label, ARIA role, labeled or missing status, and an exact fix hint.
Application Form: Searchable Select Blueprint
Static open combobox blueprint with a search input, grouped options, one highlighted and one checked, and a create new row.
Application Activity: Activity Calendar
Month grid calendar with per-day activity dots scaled by event count and a selected-day event list beside it.
Application Localization: Translation Progress Card
Translation progress panel listing each language with a percent complete bar, exact string counts, and a Live, Preview, or Draft status badge.
Application Auth Page: Sso Error Page
SSO failure page with the specific error reason, a named admin contact, numbered steps to resolve, and retry plus password fallback actions.
Application Dialog: Import Result Dialog
Post-import report dialog showing created, skipped, and failed row counts with named skip reasons and a download link for the skipped rows.
Application Onboarding: Data Source Status
Onboarding panel showing three data source connection rows with connected, connecting, and failed states including an actionable error and continue-anyway link.
Application Stat Card: Threshold Alert Card
A stat card in breach state showing a live metric against its configured threshold with a calm next-action line.
Application Billing: Refund Status Card
Refund in progress with amount, dates, returning card, and a four stage pipeline showing current processing state.
Application Chart: Radar Chart
RadarChart comparing two plans across five feature dimensions with filled polygons and a shared legend.
Application Accessibility: Keyboard Nav Guide
Keyboard shortcut reference table covering global browser keys and Acme app shortcuts rendered with Kbd components, action descriptions, and context labels.
Application Auth Page: Welcome Back Login
Returning user login showing the known account avatar and email with a single password field, passkey option, and a use a different account escape hatch.
Application Localization: Format Settings
Format settings panel with date, time, week start, number, and currency Selects each showing a live preview value and an auto-detect from locale toggle.
Application Dialog: Session Expiring Dialog
Session expiry warning dialog giving two minutes notice, a stay-signed-in action, and a guarantee that open drafts are saved regardless of choice.
Application Stat Card: Multi Metric Card
One card holding three related metrics in a row with vertical dividers, each showing a value, label, and small delta.
Application Notification: Subscription Preferences
Followed items panel listing subscribed projects, people, and labels as ruled rows with per-row unfollow actions.
Application Onboarding: Feature Spotlight Blueprint
Static open-state coach-mark that highlights a new bulk-actions toolbar with a callout card, New badge, and a Got it dismiss button.
Application Chart: Bubble Chart
ScatterChart plotting accounts by usage score, monthly revenue, and seat count encoded as bubble size.
Application Dialog: Keyboard Help Dialog
Keyboard shortcuts reference dialog with two columns of grouped Kbd combos, a search bar, and a roadmap note that remapping is not yet available.
Application Billing: Usage Alerts Panel
Alert rules as a ruled list with metric thresholds, recipient emails, and toggles, plus an add alert action and a hard cap caveat.
Application Accessibility: Contrast Checker Card
Theme token contrast audit card showing computed ratios and AA and AAA pass badges for normal and large text across four Acme token pairings.
Application Localization: Locale Preview Card
Side-by-side locale comparison card showing how dates, numbers, currency, and a sample sentence render in English versus the selected target locale.
Application Chart: Waterfall Chart
MRR movement chart with floating bars for new business, expansion, and churn across a billing period.
Application Billing: Receipt Card
Single payment receipt with amount, date, card, transaction ID, a download PDF action, and a link to the formal tax invoice.
Application Onboarding: Checklist Widget
Corner card onboarding widget with a progress ring, five setup tasks, two complete, the next step highlighted, and an honest dismiss note.
Application Localization: Translation Table
Translation string table with mono keys, source English, French target, and Translated, Fuzzy, and Missing status badges with a per-row edit action.
Application Setting: Session Timeout Settings
Session control panel with an idle timeout selector, a remember this device toggle, and a sign out all sessions action with its consequences listed.
Application Accessibility: A11y Checklist Panel
WCAG 2.1 audit checklist with pass, fail, and manual badges per criterion, an overall score, and per-row links to the W3C understanding docs.
Application Notification: Notification Empty State
Notifications inbox zero view with a today tally of cleared, snoozed, and archived counts plus a settings link.