UI Kit

Primary action trigger. Use Primary for main actions, Secondary for less important actions, Ghost for subtle interactions.

Status labels and counters. Default for active states, Secondary for neutral, Destructive for errors, Outline for subtle tags.

User or entity representation. Shows profile images with automatic fallback to initials when image fails to load.

Contextual hints on hover. Ideal for icon-only buttons, truncated text, and providing additional context without cluttering the UI.

Action menus and selection lists. Use for row actions, bulk operations, and contextual menus with icons and separators.

Compact action buttons using icons only. Always pair with tooltips for accessibility. Use for toolbars and dense UIs.

Text input with label and optional helper text. Use for email, name, phone, and other single-line data entry.

Multi-line text input. Use for notes, descriptions, deal details, and longer-form content entry.

Dropdown selection for predefined options. Use for status, priority, assignee, and categorical data.

Multi-select options with checkboxes. Use for tags, features, permissions, and any multi-choice selection.

Toggle for on/off states. Use for settings, preferences, and binary options that take effect immediately.

Single selection from mutually exclusive options. Use for priority levels, contact type, or any single-choice field.

Content container with header and body. Foundation for dashboards and detail pages.

Metric display with change indicator. Key component for dashboards.

Key-value pair display. Use for contact details, deal info, and metadata.

No data placeholder. Shows when lists or tables have no content.

Important messages with icon. Use for validation errors, warnings, and success confirmations.

Temporary notifications. Auto-dismiss after action completion.

Loading placeholder. Shows content shape while data loads.

Progress indicator. Shows completion percentage for uploads, imports.

Indeterminate loading. Use when progress is unknown.

Modal windows for focused tasks. Use for create/edit forms and confirmations.

Side drawer panel. Use for quick edit forms and secondary content.

Floating content panel. Use for filters, date pickers, and rich tooltips.

Action menu with items. Use for row actions and context menus.

Command palette (Cmd+K). Quick navigation and search.

Tabbed content switcher. Use for detail page sections and settings.

Location trail navigation. Shows current page hierarchy.

Page navigation for lists. Controls table and grid pagination.

Main app navigation. Fixed on desktop, drawer on mobile.

Header bar with search and user menu. Persistent across all pages.

Title with description and actions. Standard header for all pages.

Main application frame. Sidebar + topbar + content layout.

Split layout for detail pages. Main content + sidebar pattern.

Adjustable split layout. User can drag to resize.

Deal stage column in Kanban board. Shows count and total value.

Deal list item with status and value. Used in tables and lists.

Contact preview card. Shows avatar, name, and key info.

Activity log entry. Shows action, user, and timestamp.