UI Kit
Explore all components and design tokens. Use these building blocks to customize your dashboard.
Learn about the design system tokens, patterns, and best practices. This documentation helps you customize and extend the template.
Overview
Philosophy and goals behind the CRM Dashboard Kit design system.
Purpose
This UI Kit provides a comprehensive set of components, patterns, and design tokens for building premium admin dashboards and CRM applications. It powers all 150+ pages in the template, ensuring visual consistency across dashboards, CRM modules, apps, and settings.
Design Principles
Clarity
Information hierarchy is paramount. Users immediately understand what's most important.
Density
Optimized for information-rich interfaces. Compact but readable.
Consistency
Same patterns everywhere. Users learn once and apply everywhere.
Accessibility
WCAG AA compliant. 4.5:1 contrast, visible focus states, 44px touch targets.
Technology Stack
Colors
OKLCH-based color palette for perceptually uniform colors.
Color Philosophy
- •Cool grays (hue 250) convey technology and professionalism
- •Layered backgrounds create depth (app bg off-white, cards pure white)
- •Functional color only for meaning, not decoration
Primary (Brand)
Primary
Hover
Semantic Colors
Success
Warning
Danger
Info
Neutral Gray Scale
50
100
200
300
400
500
600
700
800
900
Customization
Change the primary hue in CSS variables to update the entire color scheme:
--primary: oklch(0.550 0.200 250); /* Change hue value */Related Documentation
Typography
Geist font family with a clear size and weight hierarchy.
Font Families
Type Scale
Font Weights
Related Documentation
Spacing & Layout
4px base unit with 8px grid for consistent layouts.
Spacing Scale
Common Patterns
- •
p-5orp-6for card padding - •
gap-4orgap-6for grid gaps - •
space-y-4for stacked items - •
px-4 py-6(mobile),px-6 py-8(desktop) for page padding
Breakpoints
sm 640pxmd 768pxlg 1024pxxl 1280pxRelated Documentation
Components
shadcn/ui primitives customized for CRM use cases.
Component Principles
- •Composition over configuration
- •Consistent prop patterns across components
- •Accessible by default (ARIA, keyboard nav)
- •Dark mode support built-in
Component Categories
Base UI
Buttons, badges, avatars, tooltips, and dropdowns form the core interactive elements.
Forms
Input controls for CRM data entry including text, select, checkbox, and switch.
Data Display
Content presentation for dashboards and detail views with cards and stats.
Feedback
User communication through alerts, toasts, progress bars, and loading states.
Overlays
Modal windows, side drawers, and floating content for focused interactions.
CRM-Specific Widgets
Purpose-built components for CRM workflows: Pipeline cards, Deal rows, Contact summaries, Activity items, and more.
Related Documentation
Patterns
Common UI patterns and page templates for CRM applications.
Page Patterns
Dashboard
Stats grid + charts + activity lists
List/Table
Search + filters + DataTable + pagination
Detail
Header + tabs + content panels
Form
Sectioned cards with validation
Layout Patterns
App shell, page headers, two-column layouts, and resizable panels for consistent page structure.
Data-Heavy Patterns
DataTable
Sorting, filtering, selection, bulk actions
Kanban Board
Drag-and-drop columns and cards
File Manager
Grid/list view, preview panel
Email/Messaging
Two-panel conversation interface
Create/Edit Forms
- •Full page: Complex forms (Contacts, Deals, Invoices)
- •Drawer: Quick edits (Tasks, Notes, Activities)
Quick Links
Browse all UI components with live previews and usage examples.
Complete markdown documentation in the docs/ folder.
Source of Truth: Content on this page is derived from markdown files in docs/. For complete details, refer to design-system.md, ux-guidelines.md, and ui-kit-*.md.