@classic-homes/theme-svelte

Svelte 5 components for the Classic Theme design system. Built on Bits UI primitives and styled with Tailwind CSS.

Installation

``bash
npm install @classic-homes/theme-svelte @classic-homes/theme-tokens
`

Setup

$3

Add the Classic Theme preset to your tailwind.config.js:

`js
import preset from '@classic-homes/theme-tailwind-preset';

export default {
presets: [preset],
content: [
'./src/*/.{html,js,svelte,ts}',
'./node_modules/@classic-homes/theme-svelte/*/.{html,js,svelte,ts}',
],
};
`

$3

Import the CSS tokens in your app's root CSS file:

`css
@import '@classic-homes/theme-tokens/css';
`

Or in your root layout:

`svelte

`

Usage

`svelte




Welcome


Click me


`

Components

$3

- Button - Buttons with variants (default, secondary, destructive, outline, ghost, link)
- Input - Text input field
- Textarea - Multi-line text input
- Label - Form labels
- Checkbox - Checkbox input
- Switch - Toggle switch
- Select - Dropdown select
- FormField - Combined label + input + error handling

$3

- AppShell - Application wrapper with skip links and toast container
- DashboardLayout - Sidebar + header layout for dashboards
- PublicLayout - Header + footer layout for public pages
- FormPageLayout - Centered form page layout
- Sidebar - Navigation sidebar
- Header - Page header
- Footer - Page footer

$3

- Alert - Alert messages (default, destructive, success, warning, info)
- AlertDialog - Confirmation dialogs
- Dialog - Modal dialogs
- Toast - Toast notifications
- ToastContainer - Toast notification container
- Spinner - Loading spinner
- Skeleton - Loading skeleton

$3

- Card - Card container with header, content, footer
- Badge - Status badges
- DataTable - Sortable data table
- Tabs - Tab navigation
- Tooltip - Hover tooltips
- DropdownMenu - Dropdown menus
- Avatar - User avatars

$3

- LogoMain - Main logo component
- LoadingLogo - Animated loading logo

$3

Notification UI components are available via a separate entry point. This makes the @classic-homes/notifications dependency optional - you only need it if you use these components.

`bash


Install the notifications package if using notification components

`svelte

`

Available notification components:

- NotificationBadge - Unread count badge
- NotificationItem - Single notification card
- NotificationList - List of notifications with empty state
- NotificationDialog - Detail dialog for a notification
- NotificationFilters - Filter tabs (all/read/unread)
- NotificationBulkActions - Bulk action toolbar

Error Handling

$3

Components in this library do not include built-in error boundaries to give you full control over error handling. We recommend implementing error handling at your application's root level.

$3

Create an ErrorBoundary component to catch and handle errors gracefully:

`svelte



{#if error}
{#if fallback}
{@render fallback(error, reset)}
{:else}


Wrap your AppShell with the ErrorBoundary:

`svelte








`

$3

You can provide a custom fallback UI:

`svelte

{#snippet fallback(error, reset)}






`

Toast Notifications

The library includes a toast store for managing notifications:

`svelte


Show Success
Show Error
`

Toast methods:

- toastStore.success(message, options?) - Green success toast
- toastStore.error(message, options?) - Red error toast (persistent by default)
- toastStore.warning(message, options?) - Yellow warning toast
- toastStore.info(message, options?) - Blue info toast
- toastStore.add(toast) - Add custom toast
- toastStore.remove(id) - Remove toast by ID
- toastStore.clear() - Remove all toasts

Sidebar State

For layouts with collapsible sidebars, use the sidebar store:

`svelte



{sidebarStore.isOpen ? 'Close' : 'Open'} Sidebar

`

TypeScript Support

All components are fully typed. Import types as needed:

`typescript
import type {
NavItem,
NavSection,
User,
Tab,
FileMetadata,
DataTableColumn,
SelectOption,
} from '@classic-homes/theme-svelte';
`

Svelte 5 Runes

All components use Svelte 5 runes syntax:

- $props() for component props
- $state() for reactive state
- $derived() for computed values
- $effect() for side effects
- $bindable()` for two-way binding

Accessibility

Components are built with accessibility in mind:

- Proper ARIA attributes
- Keyboard navigation support
- Focus management
- Screen reader friendly
- Skip links in AppShell

License

MIT