Tessera UI is a production-ready UI component library with native support for React, Vue, Angular, and vanilla HTML. Install a single package for your framework, import the components you need, and start building.
- One library, every framework — the same components work in React, Vue, Angular, or plain HTML
- 71 components — forms, data display, navigation, overlays, layout, and more
- Design tokens — three-tier token architecture for theming at every level
- Dark mode + density — light, dark, high-contrast themes with compact, comfortable, and spacious density modes
- Accessible by default — WCAG 2.1 AA compliant with keyboard navigation and ARIA patterns
- Type-safe — fully typed props, events, and methods across all framework packages
- Zero-config — one import, components just work. No manual setup required
| Component | Tag | Description |
|---|
| Button | <ts-button> | Versatile button with variants, sizes, and appearances |
| Input | <ts-input> | Text input with clearable, character counter |
| Textarea | <ts-textarea> | Multi-line input with auto-grow and character counter |
| Number Input | <ts-number-input> | Stepper input with +/- buttons and min/max |
| Checkbox | <ts-checkbox> | Checkbox with indeterminate state |
| Checkbox Group | <ts-checkbox-group> | Multi-select checkbox container |
| Radio | <ts-radio> | Radio button for single selection |
| Radio Group | <ts-radio-group> | Single-select radio container |
| Select | <ts-select> | Dropdown with search, filter, and multi-select |
| Combobox | <ts-combobox> | Autocomplete text input with filterable dropdown |
| Toggle | <ts-toggle> | Switch control for boolean values |
| Slider | <ts-slider> | Range input with dual thumbs, marks, and vertical mode |
| Date Picker | <ts-date-picker> | Calendar with range selection, year nav, and i18n |
| Time Picker | <ts-time-picker> | Hour/minute/second picker with 12/24h format |
| Tag Input | <ts-tag-input> | Multi-value input with chip tags |
| File Upload | <ts-file-upload> | Drag-and-drop with file list and max count |
| Switch Group | <ts-switch-group> | Segmented control / toggle button group |
| Form | <ts-form> | Form wrapper with value collection |
| Component | Tag | Description |
|---|
| Card | <ts-card> | Container with header, body, footer, and media slots |
| Table | <ts-table> | Data table with sorting and row selection |
| Badge | <ts-badge> | Status indicator with variants |
| Avatar | <ts-avatar> | User image with initials fallback and status indicator |
| Avatar Group | <ts-avatar-group> | Overlapping avatar stack with overflow |
| Chip | <ts-chip> | Removable pill-shaped label |
| Timeline | <ts-timeline> | Vertical activity feed with icons and timestamps |
| Progress | <ts-progress> | Linear, circular, striped, and buffer progress |
| Spinner | <ts-spinner> | Circular loading indicator |
| Skeleton | <ts-skeleton> | Loading placeholder with animation |
| Divider | <ts-divider> | Horizontal or vertical separator |
| Empty State | <ts-empty-state> | Zero-data placeholder with icon and CTA |
| Icon | <ts-icon> | 1,400+ built-in Lucide icons |
| Component | Tag | Description |
|---|
| Tabs | <ts-tabs> | Tabbed content with vertical, closable, and scrollable modes |
| Breadcrumb | <ts-breadcrumb> | Page trail with icons and collapsible items |
| Pagination | <ts-pagination> | Page navigation with first/last and info text |
| Nav | <ts-nav> | Sidebar/horizontal nav with nested items and badges |
| Stepper | <ts-stepper> | Multi-step wizard indicator |
| Command Palette | <ts-command-palette> | Cmd+K searchable command menu |
| Component | Tag | Description |
|---|
| Dialog | <ts-dialog> | Confirmation dialog with exit animations |
| Modal | <ts-modal> | Full dialog overlay with focus trapping |
| Drawer | <ts-drawer> | Slide-in side panel |
| Tooltip | <ts-tooltip> | Hover/focus information popup |
| Popover | <ts-popover> | Rich interactive floating panel |
| Alert | <ts-alert> | Inline contextual feedback message |
| Toast | <ts-toast> | Floating notification with pause-on-hover |
| Banner | <ts-banner> | Full-width page-level notification |
| Menu | <ts-menu> | Dropdown menu with dividers and checkbox items |
| Component | Tag | Description |
|---|
| App Layout | <ts-app-layout> | CSS Grid app shell with sidebar/header/content |
| Sidebar | <ts-sidebar> | Collapsible sidebar with header/nav/footer |
| Page Header | <ts-page-header> | Structured header with breadcrumb and actions |
| Container | <ts-container> | Centered max-width page container |
| Grid | <ts-grid> | CSS Grid with auto-fill responsive columns |
| Stack | <ts-stack> | Vertical flex layout with consistent gap |
| Row | <ts-row> | Horizontal flex row with responsive stacking |
| Spacer | <ts-spacer> | Explicit spacing between elements |
| Scroll Area | <ts-scroll-area> | Custom styled scrollbar container |
| Toolbar | <ts-toolbar> | Horizontal action bar |
| Accordion | <ts-accordion> | Collapsible content sections |
| Tree | <ts-tree> | Hierarchical expandable list with checkboxes |
| Package | Description |
|---|
@tessera-ui/core | Core components for vanilla HTML and any framework |
@tessera-ui/react | Tessera UI components for React |
@tessera-ui/vue | Tessera UI components for Vue |
@tessera-ui/angular | Tessera UI components for Angular |
