HT|UI

Component Library

Reusable UI components built with React, TypeScript, and Tailwind CSS. Copy them into your project and customize to fit your needs.

Installation

$ npx shadcn@latest add button

Or copy the component file directly into components/ui/

Foundations

Colors

The color palette — Electric Violet accent, Crimson Red for docs, neutral tones, and usage rules.

Typography

Font hierarchy — Nohemi for headlines, Satoshi for body, BLMelodyMono for code.

Components

Accordion

Collapsible content sections for FAQs and expandable panels.

Alert

Contextual feedback messages with multiple severity variants.

Avatar

User avatar with image, fallback initials, and multiple sizes.

Badge

Status indicators with multiple color variants.

Breadcrumb

Navigation breadcrumb for hierarchical page structure.

Button

Primary, ghost, destructive, and outline variants with multiple sizes.

CanvasText

Animated canvas-based text effect with colored bezier curves.

Card

Content container with header, body, and footer sections.

Chip

Compact label for categories, tags, and metadata.

Dialog

Modal overlay for confirmations, forms, and focused interactions.

Input

Text input with label, error states, and validation support.

Select

Dropdown select input with placeholder and error state support.

Separator

Horizontal or vertical divider for visual separation.

Switch

Toggle switch for binary settings and on/off states.

Tabs

Tabbed interface for switching between content panels.

Textarea

Multi-line text input with error state support.

Tooltip

Hover tooltip for additional context on interactive elements.

ERP Components

StatsCard

Metric card with label, value, and trend indicator for ERP dashboards.

DataTable

Flexible data table for ledger streams, rosters, and transaction logs.

StatusBadge

Status indicator with icon for workflow states and compliance.

OrderTracking

Shipment tracking card with carrier branding and origin/destination details.

ModuleNav

Sidebar navigation for switching between ERP modules.

ConsoleLog

Monospace console output for system logs and activity feeds.

ProgressBar

Progress indicator for compliance audits and task completion.

OfficeCard

World clock card for global office locations with status.

ProductCard

Card for displaying ERP product information with icon and link.