Skip to content

Component Library

16 reusable UI primitives powering the QS-Bridge admin panel.

Overview

The panel includes a shared component library at panel/ui/src/components/ui/. All components are designed for the warm amber/rust design system and exported via a barrel index.ts.

Components

Button

Polymorphic button with 4 variants and 3 sizes.

Prop Type Description
variant primary / secondary / danger / ghost Visual style
size sm / md / lg Size preset
loading boolean Shows spinner, disables interaction
iconOnly boolean Square button for icon-only usage

Card

Compound component with sub-components:

  • Card — container with border and background
  • CardHeader — top section with optional padding
  • CardTitle — heading text (Red Rose font)
  • CardDescription — subtitle text (muted)
  • CardContent — main content area
  • CardFooter — bottom section

Dialog

Modal dialog with framer-motion AnimatePresence animations.

Prop Type Description
open boolean Controlled visibility
onClose () => void Close handler
danger boolean Red styling for destructive actions
title string Dialog heading
description string Optional description

DataTable

Full-featured data table powered by @tanstack/react-table.

Feature Description
Column sorting Click headers to sort ascending/descending
Global filter Search across all columns
Pagination Configurable page size with navigation
Custom cell renderers Via column definition cell function

Badge

Status indicator with 11 colour variants:

default · success · warning · danger · info · primary · owner · admin · moderator · online · offline

Optional dot prop adds a coloured dot indicator.

Input

Form input with label, error state, and description.

Prop Type Description
type text / number / password Input type
label string Above-input label
error string Error message (red)
description string Help text below input

Additional Components

Component Description
Toast Sonner re-export with pre-configured Toaster (bottom-right position)
Skeleton Loading placeholder (rectangle, text, and circle variants)
EmptyState Centered icon/title/description with optional action button
Spinner SVG loading spinner in 4 sizes with brand colour
Switch Animated toggle with framer-motion, accessible labelling
Tabs Underline tabs with framer-motion layoutId animated indicator
Select Styled native select with label and error state
Textarea Multi-line input matching Input component pattern
Kbd Keyboard shortcut indicator (Ctrl+B, ⌘K)

Usage Pattern

All components are imported from the barrel export:

import { Button, Card, CardHeader, CardTitle, Dialog, Badge } from '@/components/ui';

Design Tokens

Components consume CSS custom properties from the design system:

--hz-accent: #d4915c;   /* Primary interactive colour */
--hz-bg2: #161310;       /* Card/surface background */
--hz-border: #2c2620;    /* Border colour */
--hz-bright: #ece7de;    /* High-emphasis text */
--hz-text: #c4beb4;      /* Body text */
--hz-muted: #78726a;     /* De-emphasized text */