Component Library Overview
Overview of Certexi's component library with 112+ widgets, 53 form fields, and 42 UI primitives built on Radix UI and Tailwind CSS.
Last updated: 2025-02-18
Component Library Overview
Certexi ships with an extensive component library built on Radix UI primitives and Tailwind CSS. The library provides everything needed for enterprise logistics applications — from basic UI primitives to domain-specific widgets.
Live Dashboard Preview
See the component library in action — the KPI dashboard composes Cards, Badges, Progress bars, and custom chart components into a real operational view.
KPI dashboard — animated counters, utilization trends, and throughput charts built entirely from library components.
Library Statistics
| Category | Count | Description |
|---|---|---|
| UI Primitives | 42 | Buttons, inputs, dialogs, cards, alerts |
| Form Fields | 53 | Text, number, date, select, file upload, custom fields |
| Widgets | 112+ | Charts, media, IoT, Nextcloud, automation |
| Total | 200+ | Production-ready components |
Architecture
The component library follows a layered architecture:
Design System
Foundation
- Typography: Inter font family with 6 weight variants
- Colors: Slate-based neutral palette with blue primary, configurable via CSS variables
- Spacing: 4px grid system (0.25rem base)
- Borders: Consistent 1px borders with configurable radius
- Shadows: 5-level elevation system
Theming
All components support dark mode via Tailwind's dark: variant. The theme is controlled at the application level and persists across sessions.
Accessibility
- WCAG 2.1 AA compliant
- Full keyboard navigation support
- Screen reader compatible (ARIA attributes)
- Focus indicators on all interactive elements
- Reduced motion support via
prefers-reduced-motion
Component Categories
UI Primitives
Core building blocks. All primitives documented and available in the playground:
| Component | Description |
|---|---|
| Button | Primary, secondary, outline, ghost, link variants |
| Input | Text, number, email, password inputs |
| Textarea | Multi-line text input |
| Label | Form labels with accessibility |
| Card | Card, CardHeader, CardTitle, CardDescription, CardContent |
| Badge | Status and count badges |
| Alert | Alert, AlertTitle, AlertDescription |
| Dialog | Modal with DialogTrigger, DialogContent, DialogHeader, DialogFooter |
| Select | SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel |
| Tabs | Tabs, TabsList, TabsTrigger, TabsContent |
| Progress | Progress bar (value/max) |
| Tooltip | Hover tooltips |
| Dropdown Menu | Context menus |
| Accordion | Collapsible sections |
| Avatar | User avatars |
| Separator | Visual dividers |
| Switch | Toggle switch |
| Checkbox | Checkbox input |
| Radio Group | Radio button groups |
| Slider | Range slider |
| Calendar | Date picker |
| Popover | Popover content |
| Collapsible | Expand/collapse content |
| Skeleton | Loading placeholders |
| Scroll Area | Custom scrollbars |
| Theme Toggle | Dark/light mode |
| Language Selector | Locale switcher (es/en) |
Form Fields
Schema-driven form system with 53 field types, built-in validation, and automatic layout. Supports JSON Schema and Zod-based validation.
Widgets
Domain-specific components organized by category: charts, media players, social integrations, IoT controls, Nextcloud connectors, and automation tools.
Interactive Playground
Live component demos with editable props and real-time preview.
Usage
All components are imported from the project's component directories:
// Primitives
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
// Form fields
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem } from '@/components/ui/select';
// Domain widgets
import { MotionClipControl } from '@/components/iot/motion-clip-control';
import { UtilizationWidget } from '@/components/whms/dashboard/utilization-widget';