Installation

Get started with Classic Theme in your Svelte or SvelteKit project.

Prerequisites​

Before installing, ensure you have:

• Node.js 18 or later
• A Svelte 5 or SvelteKit project
• Tailwind CSS configured in your project

Install the Package​

Install the Svelte component library:

npm install @classic-homes/theme-svelte

Install Peer Dependencies​

Classic Theme requires these peer dependencies:

npm install tailwindcss @classic-homes/theme-tailwind-preset @classic-homes/theme-tokens

Configure Tailwind CSS​

Update your tailwind.config.js to use the Classic Theme preset:

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

/** @type {import('tailwindcss').Config} */
export default {
  presets: [preset],
  content: [
    './src/**/*.{html,js,svelte,ts}',
    // Include the component library in content scanning
    './node_modules/@classic-homes/theme-svelte/**/*.{html,js,svelte,ts}',
  ],
};

Import Design Tokens CSS​

Import the design tokens CSS in your root layout or main CSS file:

/* In your app.css or global styles */
@import '@classic-homes/theme-tokens/tokens.css';

Or in your root +layout.svelte:

<script>
  import '@classic-homes/theme-tokens/tokens.css';
</script>

Verify Installation​

Test your setup by importing and using a component:

<script>
  import { Button } from '@classic-homes/theme-svelte';
</script>

<Button variant="default">Click Me</Button>

If you see a styled button, your installation is complete.

TypeScript Support​

Classic Theme is written in TypeScript and includes full type definitions. No additional configuration is required for TypeScript projects.

Next Steps​

• Follow the Quick Start guide to build your first page
• Learn about Theming to customize the design system
• Browse the Component documentation to explore available components