Customization

Components

Reference guide for all shared and dashboard-specific components with props and usage examples.

Component Architecture

Components are organized into directories under src/components/. Import them via the @/ path alias.

GlassCard

The primary container component. Renders a card with solid surface background and shadow elevation. Supports an optional title, subtitle, and hover effect.

// Basic card
<GlassCard>
  <p>Card content goes here.</p>
</GlassCard>

// Card with title and hover effect
<GlassCard title="Revenue" subtitle="Last 30 days" hoverable>
  <p>$24,500</p>
</GlassCard>

// Card without padding (for tables or charts)
<GlassCard title="Orders" padding={false}>
  <table>...</table>
</GlassCard>

PageHeader

Consistent page title with optional description and an actions area for buttons.

// Basic header
<PageHeader title="Orders" description="Manage customer orders" />

// Header with action buttons
<PageHeader
  title="Products"
  description="Your product catalog"
  actions={
    <>
      <Button><Plus className="size-4 mr-1" /> Add Product</Button>
      <Button variant="outline">Export</Button>
    </>
  }
/>

DataTable

A feature-rich data table with sorting, pagination, and row selection. Used across all CRUD listing pages.

<DataTable
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'email', label: 'Email' },
    { key: 'status', label: 'Status' },
  ]}
  data={users}
/>

StatusBadge

A colored badge that maps status values to appropriate colors automatically.

Color mapping:

<StatusBadge status="active" />
<StatusBadge status="pending" />
<StatusBadge status="cancelled" />

EmptyState

Placeholder for empty data views. Displays an icon, title, description, and optional action.

<EmptyState
  title="No orders found"
  description="Try adjusting your search or filters."
  icon={Package}
  action={<Button><Plus className="size-4 mr-1" /> Create Order</Button>}
/>

ConfirmDialog

A modal dialog for confirming destructive actions like deleting records.

'use client'
import { useState } from 'react'
import { ConfirmDialog } from '@/components/shared/confirm-dialog'
import { Button } from '@/components/ui/button'

export function DeleteOrderButton() {
  const [open, setOpen] = useState(false)

  function handleDelete() {
    // Perform delete action
    setOpen(false)
  }

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>Delete</Button>
      <ConfirmDialog
        open={open}
        onOpenChange={setOpen}
        title="Delete Order"
        message="Are you sure? This action cannot be undone."
        confirmLabel="Delete Order"
        onConfirm={handleDelete}
      />
    </>
  )
}

StatsCard

Displays a key metric with an icon, value, and optional change percentage. Used in the stats rows of all dashboard variants.

<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <StatsCard
    label="Total Revenue"
    value="$24,500"
    change={12.5}
    icon={DollarSign}
  />
  <StatsCard
    label="Orders"
    value="1,248"
    change={-3.2}
    icon={ShoppingCart}
  />
</div>

Next Steps

Learn about writing tests in the Testing guide, or see how the mock API works in Mock API.