Skip to content

UI Component Library

Component Library

The app uses shadcn-svelte (built on bits-ui) as the UI component library. Components are located in src/lib/components/ui/ and are configured via components.json.

Available UI Components

44+ component categories organized by purpose:

Form Components

Component	Description
`button`	Primary interactive element
`input`	Text input fields
`input-group`	Grouped input with addons
`label`	Form labels
`checkbox`	Boolean toggles
`radio-group`	Option selection
`select`	Dropdown selection
`textarea`	Multi-line text input
`toggle`	Toggle switches
`switch`	On/off switches
`form`	Form wrapper with validation
`calendar`	Date picker
`range-calendar`	Date range picker

Layout Components

Component	Description
`card`	Content containers
`accordion`	Collapsible sections
`tabs`	Tabbed content
`collapsible`	Show/hide content
`separator`	Visual dividers
`scroll-area`	Custom scrollbars
`sidebar`	Side navigation panels

Component	Description
`breadcrumb`	Path navigation
`navigation-menu`	Top navigation
`dropdown-menu`	Action menus
`context-menu`	Right-click menus
`pagination`	Page navigation
`command`	Command palette

Overlay Components

Component	Description
`dialog`	Modal dialogs
`alert-dialog`	Confirmation dialogs
`drawer`	Slide-out panels (vaul-svelte)
`popover`	Floating content
`sheet`	Side sheets
`tooltip`	Hover information

Data Display

Component	Description
`table`	Data tables
`data-table`	Advanced tables
`badge`	Status indicators
`avatar`	User avatars
`progress`	Progress bars
`skeleton`	Loading placeholders
`empty`	Empty state displays
`kbd`	Keyboard shortcuts
`sonner`	Toast notifications

Usage Pattern

<script>
  import { Button } from '$lib/components/ui/button';
  import * as Dialog from '$lib/components/ui/dialog';
  import * as Card from '$lib/components/ui/card';
</script>

<Card.Root>
  <Card.Header>
    <Card.Title>Title</Card.Title>
  </Card.Header>
  <Card.Content>
    <Button>Click me</Button>
  </Card.Content>
</Card.Root>

Styling Approach

Tailwind CSS 4.0 with @tailwindcss/typography and @tailwindcss/vite
tailwind-variants for component variant definitions
tailwind-merge via cn() utility for class merging
tw-animate-css for animations
mode-watcher for dark/light theme support

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

Shared Non-UI Components

Located in src/lib/components/shared/:

Component	Description
`doc-tree.svelte`	Document tree view (30.6KB, used in docs/hubs)
`bubble-chat/`	Chat bubble interface
`messages-toggle/`	Message notification toggle
`notifications-toggle.svelte`	Notification bell with badge
`dark-mode-toggle.svelte`	Theme switcher
`file-upload.svelte`	File upload handler
`country-combobox.svelte`	Country selector
`categories-combobox.svelte`	Category selector
`emoji-picker.svelte`	Emoji selection popup
`storage-breakdown.svelte`	Storage usage visualization

Each module has a dedicated sidebar in src/lib/components/sidebars/:

Sidebar	Module
`profile-sdiebar.svelte`	Profile editing
`connect-sidebar.svelte`	Chat/messaging
`hyvflow-sidebar.svelte`	Project management
`account-sidebar.svelte`	Account settings
`marketplace-sidebar.svelte`	Marketplace browsing
`orders-sidebar.svelte`	Order management