Getting Started

Installation

Get `svelora` up and running in your SvelteKit project in a few minutes.

Prerequisites

Svelora requires Svelte 5, Tailwind CSS 4, and SvelteKit. Make sure your project uses these before installing.

Create a SvelteKit project

If you don't have a SvelteKit project yet, create one first.

npx sv create my-app
cd my-app

Install Svelora

Add `svelora` and its peer dependencies to your project.

npm install svelora mode-watcher

Configure Tailwind CSS

Import the Svelora theme in your `layout.css` file. This sets up the OKLCH color system, component styles, and dark mode support.

`src/routes/layout.css`

@import 'tailwindcss';
@import 'svelora/theme.css';

@custom-variant dark (&:where(.dark, .dark *));

Set up dark mode

Add `ModeWatcher` to your root layout for automatic dark mode support.

`src/routes/+layout.svelte`

<script lang="ts">
 import './layout.css';
 import { ModeWatcher } from 'mode-watcher';

 let { children } = $props();
</script>

<ModeWatcher />
{@render children()}

Start using components

Import and use any Svelora component in your Svelte files.

`src/routes/+page.svelte`

<script lang="ts">
 import { Button, Card, Badge } from 'svelora';
</script>

<Card>
 {#snippet header()}
 <h3>Welcome to Svelora</h3>
 <Badge label="New" variant="soft" color="success" />
 {/snippet}

 <p>Your first Svelora component!</p>

 {#snippet footer()}
 <Button variant="solid" color="primary" label="Get Started" />
 {/snippet}
</Card>

(Optional) Enable MCP for Cursor

If you use Cursor, Svelora can install a ready-to-use MCP config for docs tools right after package install.

Install the MCP template

svelora-mcp-install-template

Generated `.cursor/mcp.json`

{
  "mcpServers": {
    "svelora-docs": {
      "type": "stdio",
      "command": "node",
      "args": ["./node_modules/svelora/dist/mcp/server.mjs"],
      "cwd": "${workspaceFolder}"
    }
  }
}

Need the full setup guide? See MCP for Cursor IDE.

(Optional) Install peers for advanced features

A few components rely on optional peer dependencies. Only install the ones you actually use.

Editor (Tiptap stack)

# Only needed if you import <Editor /> from "svelora/editor"
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit \
 @tiptap/extension-bubble-menu @tiptap/extension-character-count \
 @tiptap/extension-drag-handle @tiptap/extension-image \
 @tiptap/extension-mention @tiptap/extension-placeholder \
 @tiptap/extension-table @tiptap/extension-table-cell \
 @tiptap/extension-table-header @tiptap/extension-table-row \
 @tiptap/extension-text-align @tiptap/extension-typography \
 @tiptap/extension-youtube @tiptap/suggestion tiptap-markdown

Form validation schema

# <Form schema={...}> works with any one of these.
# Pick whichever you already use:
npm install zod
npm install valibot
npm install yup
npm install joi