Design System
A collection of reusable UI components built with consistent design tokens. Browse the components below or use the sidebar to navigate.
Actions & Commands
Trigger user actions, reveal menus, and run commands.
Button
Primary, secondary, and tertiary button styles with multiple sizes and states.
Explore buttonsButton Group
Group related buttons together with shared borders and connected styling.
Button Card
Clickable, card-shaped button. Three variants (Date, Info, Info-icon) × two tones (Primary, Secondary).
Dropdown
Menus and selectors with keyboard support, groups, icons, and multi-level nesting.
Floating Menu
Context and overflow menus with smart positioning, groups, and shortcuts.
Command Menu
Keyboard-driven command palette for quick actions and navigation.
Toolbar
Grouped action bar for editors, document views, and bulk-action contexts.
Segmented Control
Pill-shaped single-select toggle. Tighter than ButtonGroup, ideal for filter switches.
Forms & Input
Capture user data — text, numbers, dates, files, and rich content.
Input
Text inputs with labels, hints, validation states, and icon support.
Label
Typographic labels with configurable weight, size, color, and style for forms and data displays.
Checkbox
Selection controls for single or multiple options with indeterminate state.
Radio Group
Card-style single-select list with keyboard navigation and per-item descriptions.
Toggle
On/off switches for binary settings with smooth transitions.
Slider
Range inputs for selecting numeric values within a defined range.
Date Picker
Calendar-based date selection with range support and input field integration.
Input Date Picker
Date input with a popover calendar, range mode, and time selection.
Input Time Picker
Time input with a popover dropdown, 12/24h format, minute step, and range validation.
Calendar
Month grid with range selection, events, and keyboard navigation.
File Upload
Drag-and-drop and click-to-upload file selection with progress indicators.
Math Input
Formula-authoring field with WYSIWYG and LaTeX source modes.
Rich Text Editor
Two-variant TipTap-based editor for form authoring and long-form content.
Form Section
Titled card container for grouping related form fields with color variants.
Field Panel
Framed form sections with title, description, and grouped field layouts.
Combobox
Searchable single-select with type-ahead filter, custom item template, sync or async loader.
Multi Select
Chips-in-input multi-value picker. Backspace removes the last chip when input is empty.
Number Input
Stepper with +/- buttons, prefix/suffix slots, decimal precision. Common for POS quantity, currency, dosage.
Rating
Star rating control. Interactive (click + hover preview) or read-only with fractional values for averaged scores.
Selection Cards
Pictorial radio and checkbox cards where the visual carries the choice.
Radio Card
Pictorial single-choice selector where the illustration — not the label — communicates the choice.
Checkbox Card
Pictorial multi-select card. Mix and match options with a checkmark badge overlay and brand border.
Checkbox Item
Bordered card wrapping a checkbox and label. The entire card is clickable with state-aware borders.
Navigation
Help users find their way — app nav, tabs, trails, and stepped flows.
Sidebar Navigation
Vertical navigation menus with grouping, icons, and active state indicators.
Header Navigation
Top-level navigation bar with links, dropdowns, and responsive layout.
Tabs
Tabbed interface for switching between content panels within a view.
Breadcrumb
Navigation trail showing the current page location within a hierarchy.
Progress Steps
Step indicators with text, icon, and line connector variants in horizontal and vertical layouts.
Pagination
Standalone pagination control with configurable boundary/sibling counts and optional per-page selector.
Notification Bell
Header notification dropdown with unread badge, severity-tinted item list, mark-all-read action, empty state.
Data Display
Surface information — rows, metrics, tags, and identity.
Table
Data tables with sorting, selection, pagination, and responsive layout.
DataTable in Action
Live interactive demo of DataTable<T> with mock JSON data — search, filter, sort, paginate, select, and trigger row actions.
List Item
Avatar + title + subtitle rows used in contact lists, conversations, and sidebars.
Info Row Item
Inbox-style rows with leading visual, stacked primary/secondary/tertiary lines, meta slot, emphasis tones, and hover-reveal checkboxes.
Tree List
Collapsible hierarchical list for file explorers, org charts, and nav trees.
Metric Item
KPI tiles with big numbers, deltas, and optional sparkline charts.
Avatar
User profile images and initials placeholders in multiple sizes and colors.
Tag
Compact labels for categorization, filtering, and metadata display.
Badge
Status indicators and counters in various colors and sizes.
Code Block
Fenced code display with filename header, language chip, copy button, and line numbers.
Avatar Group
Stacked overlapping avatars with overflow counter. Sizes match Avatar. Use for assignee lists and team rosters.
Timeline
Vertical activity feed with connector line. Status-tinted markers (info/success/warning/error). Use for audit trails.
Content Containers
Wrap and structure the content of a page.
Page Header
Consistent page titles with supporting text, breadcrumbs, and action slots.
Section Header
Section title row with eyebrow, description, badge, and action slot.
Section Footer
Sticky action footer with primary/secondary buttons and optional secondary link.
Accordion
Expandable content sections for organizing information in a compact layout.
Info Card
Image cards with title, description, and actions in vertical or horizontal layouts.
Info Panel
Collapsible side panels and slide-over drawers for details, filters, and metadata.
Hero Card
Top-of-page banner with Profile, Highlight, and Featured variants - avatars, gradients, and edge-to-edge media.
Action Card
Horizontal announcement banner with avatar, text, and actions — four layouts × three tones.
Media Card
Vertical content card with cover media, title, description, action buttons, and optional three-dot menu.
Inline CTA
Contextual call-to-action banners for promotions and feature highlights.
Component Card
Reusable catalog card with live preview slot, four variants, and category accents.
Placeholder
Empty state indicators for tables, lists, and sections with no data.
Feedback & Status
Tell users what's happening — status, loading, progress, and errors.
Alert
Contextual feedback messages for success, warning, error, and info states.
Tip
Compact inline callouts in five tones for notes, gotchas, and edge-case guidance.
Tips Panel
Aside card that wraps a stack of Tips with an icon, title, optional count chip, description, and footer. Drop into the right column of form-with-guide layouts.
Tooltip
Contextual information popups triggered on hover or focus.
Loading
Spinner, dots and bar indicators for indeterminate async work, with block and overlay modes.
Skeleton
Animated loading placeholders that mimic content shape while data is being fetched.
Progress Bar
Visual indicators for task completion and loading states.
Error State
Page-level and inline error screens for 404, 500, 403, 503 and failed panel loads.
Toast
Transient notifications via IToastService. 4 severities, severity-based auto-dismiss, action button slot, ARIA-correct.
Banner
Full-width announcement strip. 5 tones including a gradient announcement variant. More prominent than Alert.
Empty State
Centered no-data placeholder. Distinct from Placeholder (skeleton) and ErrorState (errors). Use when a list legitimately has no data yet.
Overlays
Temporary surfaces that sit on top of the page.
Modal
Overlay dialogs for confirmations, forms, and focused content.
Slide-Out Menu
Off-canvas panel for detailed content, forms, and secondary navigation.
Drawer
Slide-in side panel for master/detail flows. Right (default), left, or bottom positions, 5 sizes, header/body/footer slots.
Popover
Click-triggered rich content panel. 12 placement positions, optional header & footer. Use for filter forms, mini detail views.
Confirm Dialog
Promise-based confirm via IConfirmService. 3 tones (Neutral/Warning/Danger). Backdrop-click is blocked for destructive actions.
Charts
ECharts-based data visualization components with full analytics interactivity.
Bar Chart
Categorical comparisons with horizontal/vertical orientation, zoom, and brush selection.
Donut Chart
Part-to-whole visualization with configurable inner radius and center label.
Line Chart
Trend lines with smooth curves, area fills, zoom, and multi-series support.
Pie Chart
Simple part-to-whole distribution with labels, tooltips, and legend toggling.
HeatMap Chart
Density visualization with color gradients across two categorical dimensions.
Radar Chart
Multi-dimensional comparison across named indicators with area fill.
Rose Chart
Nightingale diagram with radius-scaled sectors for magnitude comparison.
Sankey Chart
Flow diagram showing quantities between nodes with gradient links.
Scatter Plot
Correlation visualization with optional bubble mode for three-dimensional data.
Stacked Bar Chart
Composition over categories with stacked series and axis tooltips.
Time Series
Time-axis line chart with zoom, brush, area fill, and real-time streaming.
Universal Chart
Raw ECharts option passthrough for any chart configuration not covered by typed wrappers.
UX Patterns
Full-page demos showing enterprise UX patterns in action with hospital mock data.
Patient Directory
List page with search, filters, sorting, pagination, bulk actions, and DataTable.
Patient Detail
Detail view with summary card, tabbed content, vitals, appointments, and timeline.
Registration Form
Multi-section form with guide panel, progress tracking, and validation.
Registration Wizard
Step-by-step guided form with progress indicator, review step, and draft saving.
Hospital Dashboard
Overview page with KPI metrics, recent activity feed, and today's schedule.
Task Board
Kanban board with draggable cards, priority badges, and task detail slideout.
Audit Trail
Timeline-based activity log with filtering, action types, and field-level diffs.
Settings
Tabbed settings with form rows, toggles, dropdowns, and integration status.
Bed Management
Color-coded floor grid with occupancy status, census stats, and bed assignments.
Pricing Plans
SaaS plan cards with feature comparison matrix and billing toggle.
Pharmacy POS
Patient-first point of sale with auto-detect Walk-in/OPD/IPD and prescription loading.
Pharmacy POS (Unified)
Unified POS with mode toggle for Walk-in, OPD, and IPD workflows.
Trade History
Full-page enterprise demo with sidebar navigation and an advanced DataTable showing trade records, filters, and status chips.