Components
Reference guide for all shared and dashboard-specific components with props, slots, and usage examples.
Component Architecture
Components are organized into directories that determine their auto-import prefix. No import statements are needed — Nuxt discovers and registers them automatically.
| Directory | Prefix | Example |
|---|---|---|
| components/shared/ | Shared | <SharedGlassCard> |
| components/dashboard/ | Dashboard | <DashboardStatsCard> |
| components/docs/ | Docs | <DocsCodeBlock> |
SharedGlassCard
The primary container component. Renders a card with solid surface background and shadow elevation. Supports an optional title, subtitle, and hover effect.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Card heading text |
| subtitle | string | — | Muted text below the heading |
| hoverable | boolean | false | Enable shadow elevation on hover |
| padding | boolean | true | Add default p-6 padding |
| className | string | — | Additional CSS classes |
Card content goes here.
$24,500
...
SharedPageHeader
Consistent page title with optional description and an actions slot for buttons.
| Prop | Type | Description |
|---|---|---|
| title | string (required) | Page heading text |
| description | string | Subtitle below the heading |
Slots:#actions — rendered on the right side, typically for action buttons.
SharedDataTable
A feature-rich data table with sorting, pagination, and row selection. Used across all CRUD listing pages.
| Prop | Type | Description |
|---|---|---|
| columns | Column[] | Column definitions with key, label, sortable, and optional cell slot |
| data | any[] | Row data array |
SharedStatusBadge
A colored badge that maps status values to appropriate colors automatically.
| Prop | Type | Description |
|---|---|---|
| status | string (required) | Status value that determines badge color |
Color mapping:
| Status | Color |
|---|---|
| active, completed, paid, delivered | Green / Success |
| pending, processing | Yellow / Warning |
| cancelled, overdue, failed | Red / Error |
| draft, inactive | Gray / Neutral |
SharedEmptyState
Placeholder for empty data views. Displays an icon, title, description, and optional action slot.
| Prop | Type | Description |
|---|---|---|
| title | string (required) | Main heading text |
| description | string | Explanation text |
| icon | string | Lucide icon name |
SharedConfirmDialog
A modal dialog for confirming destructive actions like deleting records. Uses v-model:open for visibility control.
| Prop | Type | Description |
|---|---|---|
| title | string | Dialog heading |
| message | string | Confirmation message body |
| confirmLabel | string | Confirm button text (default: "Delete") |
DashboardStatsCard
Displays a key metric with an icon, value, and optional change percentage. Used in the stats rows of all dashboard variants.
| Prop | Type | Description |
|---|---|---|
| label | string | Metric name (e.g., "Total Revenue") |
| value | string | number | Metric value (e.g., "$24,500") |
| change | number | Percentage change (positive = green, negative = red) |
| icon | string | Lucide icon name |
DashboardChartCard
A card wrapper designed for charts. Provides a title, optional subtitle, and a content area with a set height for the chart container.
| Prop | Type | Description |
|---|---|---|
| title | string | Chart heading |
| subtitle | string | Muted text below the heading |
| height | number | Chart container height in pixels |
DocsCodeBlock
Syntax-highlighted code block powered by Shiki. Includes a copy-to-clipboard button and language label.
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string (required) | — | The code to highlight and display |
| language | string | typescript | Shiki language identifier (vue, css, json, bash, etc.) |
Tip
All shared components can be used anywhere without imports — Nuxt auto-imports them based on their directory path. Just type <SharedGlassCard> in any template and it works.