Skip to content

Twentyfirst UIPro

HaloPro

All components

236 components in 34 groups. Each links to the example that shows it.

View as Markdown

Admin

Qr Code

Life

HabitTracker MoodPicker VitalTile ActivityRings SleepChart MedicationList JournalEntry GoalCard InsightCard ConsentList

Household

BudgetList SubscriptionList NetWorthCard DeadlineList PolicyCard CoverageMatrix ClaimTimeline DocumentList

Agents

AgentCard AgentDetails ChatList ChatWorkspace SearchHits ThinkingLine FeedbackRating ActivityFeed DailyBriefingBudgetStopMemoryViewer OverrideDiff TriggerList ScheduleCalendar OrgChart VoiceMode

App Chrome

MobileTabBar PushNotification ConfigPRSummary ModuleRegistry

Approvals

ApprovalCard ApprovalInbox

Building Blocks

Kbd KeyValue Spinner Collapsible ContextMenu SplitPane ResizablePanels TreeView InlineEdit

Charts

BarChart LineChart Sparkline DonutLegendStackedBarChart AreaChart Heatmap Funnel Gauge

Chat

RichTextCodeBlockTypingDotsAgentMark ChatMessage ToolCall Reasoning PromptStartersModelPickerComposer AgentStatus RunTrace UsageMeter

Commerce

ProductArtmoneyPrice Rating StockBadge ProductCard VariantPicker CartLine OrderSummary CheckoutSteps OrderTimeline PlanCard

Data Display

CountUp StatTile Card EventCard Panel PageHeader Stagger Table ListRow Timeline FileRow KanbanColumn Progress ProgressRing

Data Table

FilterBar DataTable

Developer

LogView CodeViewer SecretField MoneyInput SettingsLayout ShortcutsOverlay StatCell UptimeBar Meter

Feedback

Skeleton Menu Modal Toast EmptyState Alert ConfirmDialog Toaster

Forms

FormFieldTextField RadioGroup Segmented Combobox TagInput Calendar DatePicker NumberInput Slider OtpInput FileDrop

Foundation

Button IconButton Chip Badge TintIcon Avatar AvatarStack

Inputs

Input Select Textarea SearchField Checkbox Switch

Form

FormuseFieldError

Select Menu

Mail

AccountSwitcher InboxList MailThreadSignatureEditorAttachmentPreview

Media

ImageVariants Gallery BeforeAfter

Navigation

Tabs Breadcrumb Pagination Menubar NavigationMenu Sidebar UserMenu

Operations

ConnectionCard ConnectionBanner ServerCard DeployPipeline DnsRecordTable DomainList MailAuthStatus LedgerTable PnLStatement ReceiptSuggestion

Overlays

Popover Tooltip

Previews

EmailPreview SearchAdPreview

Primitives

Accordion Separator AspectRatio Label Toggle ToggleGroup ButtonGroup ScrollArea HoverCard Carousel

Real Estate

ListingCard ResultsToolbar SavedSearch ValuationCard EnergyClass

Rich Text Editor

Shell

TopBarSideRailDock FloatingLayout AmbientNAVAppShell

Site

ChatLauncher CookieConsent AnnouncementBar

Status

StatusShapeStatusIndicator

System

StatusScreen AuthCard

Workspace

SubNav Drawer CommandPalette NotificationList FlowFileThumbFileCard WizardPermissionMatrixInvoicePreview TransactionRow