Tessera UI is a framework-agnostic web component library built with Stencil.js and TypeScript. Components are authored once and compiled to standards-compliant Web Components with automatic wrapper generation for React, Vue, and Angular.
- Write once, use everywhere — components work in React, Vue, Angular, or vanilla HTML
- True encapsulation — Shadow DOM prevents style leaks in both directions
- Design tokens — CSS custom properties cross the Shadow DOM boundary, making theming trivial
- Accessible by default — WCAG 2.1 AA compliant with keyboard navigation and ARIA patterns
- Tree-shakeable — only bundle the components you use
- Type-safe — strict TypeScript with fully typed props, events, and methods
| Component | Tag | Description |
|---|
| Button | <ts-button> | Versatile button with variants, sizes, and appearances |
| Input | <ts-input> | Text input with validation, labels, and help text |
| Textarea | <ts-textarea> | Multi-line text input with resize control |
| Checkbox | <ts-checkbox> | Checkbox with indeterminate state support |
| Radio | <ts-radio> | Radio button for mutually exclusive selections |
| Select | <ts-select> | Dropdown selection with custom styling |
| Toggle | <ts-toggle> | Switch control for boolean values |
| Slider | <ts-slider> | Range input with drag and keyboard control |
| Date Picker | <ts-date-picker> | Calendar-based date selection |
| File Upload | <ts-file-upload> | Drag-and-drop file upload area |
| Switch Group | <ts-switch-group> | Segmented control / toggle button group |
| Component | Tag | Description |
|---|
| Card | <ts-card> | Container with header, body, footer, and media slots |
| Badge | <ts-badge> | Small status indicator with variants |
| Avatar | <ts-avatar> | User image with initials fallback |
| Table | <ts-table> | Styled table wrapper with striping, borders, hover |
| Chip | <ts-chip> | Removable pill-shaped label |
| Divider | <ts-divider> | Horizontal or vertical separator |
| Skeleton | <ts-skeleton> | Loading placeholder with pulse animation |
| Progress | <ts-progress> | Determinate and indeterminate progress bar |
| Spinner | <ts-spinner> | Circular loading indicator |
| Empty State | <ts-empty-state> | Zero-data placeholder with icon and CTA |
| Icon | <ts-icon> | Icon component with 1,400+ built-in Lucide icons |
| Component | Tag | Description |
|---|
| Tabs | <ts-tabs> | Tabbed content with line, enclosed, and pill variants |
| Breadcrumb | <ts-breadcrumb> | Hierarchical page navigation trail |
| Pagination | <ts-pagination> | Page navigation for lists and tables |
| Nav | <ts-nav> | Sidebar or horizontal navigation |
| Stepper | <ts-stepper> | Multi-step wizard indicator |
| Component | Tag | Description |
|---|
| Modal | <ts-modal> | Full dialog overlay with focus trapping |
| Dialog | <ts-dialog> | Lightweight confirmation dialog |
| Drawer | <ts-drawer> | Slide-in side panel |
| Tooltip | <ts-tooltip> | Informational popup on hover/focus |
| Popover | <ts-popover> | Rich interactive floating panel |
| Alert | <ts-alert> | Inline contextual feedback message |
| Toast | <ts-toast> | Transient floating notification |
| Banner | <ts-banner> | Full-width page-level notification |
| Menu | <ts-menu> | Dropdown context menu |
| Component | Tag | Description |
|---|
| Stack | <ts-stack> | Vertical flex layout with consistent gap |
| Row | <ts-row> | Horizontal flex row with responsive stacking |
| Grid | <ts-grid> | CSS Grid with auto-fill responsive columns |
| Container | <ts-container> | Centered max-width page container |
| Spacer | <ts-spacer> | Explicit spacing between elements |
| Toolbar | <ts-toolbar> | Horizontal action bar |
| Accordion | <ts-accordion> | Collapsible content sections |
| Tree | <ts-tree> | Hierarchical expandable list |
| Package | Description |
|---|
@tessera-ui/core | Web Components (framework-agnostic) |
@tessera-ui/react | First-class React wrappers |
@tessera-ui/vue | First-class Vue wrappers |
@tessera-ui/angular | First-class Angular wrappers |