Components

This page documents every component exported from src/index.ts.

Design-system usage model

Use these components as the default product UI primitives.
Build product-specific wrappers in app code when domain behavior is needed.
Keep visual consistency by using tokens and existing variants before adding new ones.

Import pattern


import { Button, Card, Dialog } from "@tesseract-nexus/tesserix-ui"

Full component inventory (69)

Form and input

button
input
textarea
label
checkbox
radio
select
combobox
number-input
otp-input
slider
range-slider
switch
toggle
date-picker
time-picker
calendar
color-picker
file-upload
inline-editable
form

breadcrumb
pagination
tabs
menubar
navigation-menu
sidebar-nav
top-nav

Overlay and feedback

dialog
drawer
sheet
modal
popover
tooltip
toast
dropdown-menu
context-menu
alert

Layout and structure

accordion
collapsible
resizable
separator
scroll-area
aspect-ratio
app-shell
auth-layout
dashboard-layout
page-header
section
card
dashboard-card
bento-grid
feature-grid
hero-section
empty-state

Data display and content

table
data-table
stat
timeline
progress
rating
badge
avatar
skeleton
spinner
heading
text
command
stepper

Usage notes

Prefer composition over extending internal styles directly.
Keep state in parent containers for dialog, drawer, modal, and other controlled overlays.
For data-heavy screens, combine data-table, pagination, popover, dropdown-menu, and toast.
For responsive shells, use app-shell/dashboard-layout with sidebar-nav and top-nav.

Next steps

Validate interactive behavior in Storybook .
Pair with Hooks and Utilities for cross-cutting behavior.

Component reference pages

Getting Started Accordion