Getting Started

Install Svxui and start building.

Installation

1. Install svxui

Install svxui with the package manager of your choice.

npm install svxui

2. Set up your root layout

Add the required CSS and wrap your app with <ThemeRootProvider/>. All svxui components must be used inside it.

tokens.css is required — it contains all the CSS variables the components depend on. The others are optional.

src/routes/+layout.svelte

<script>
    import 'svxui/styles/tokens.css'; // Required 
    import 'svxui/styles/normalize.css'; // Optional
    import 'svxui/styles/utilities.css'; // Optional
    import { ThemeRootProvider } from 'svxui'; 

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

<ThemeRootProvider>
    {@render children?.()}
</ThemeRootProvider>

3. Start building

Your app is ready to use svxui!

+page.svelte

<script>
    import { Button } from 'svxui';
</script>

<Button>Button</Button>

Imports

Default import

Import everything from the root entry point:

import { Button, Badge, Dialog } from 'svxui';

Granular imports

Each layer has its own entry point. Use granular imports for better tree-shaking or when you only need specific modules:

// Components
import { Button } from 'svxui/components/button';

// Builders
import { TabsBuilder } from 'svxui/builders/tabs';
import { DialogBuilder } from 'svxui/builders/dialog';

// Attachments
import { clickoutside } from 'svxui/attachments/clickoutside';
import { focustrap } from 'svxui/attachments/focustrap';

// Utilities
import { hotkeys } from 'svxui/utilities/hotkeys';
import { PersistedState } from 'svxui/utilities/persisted-state';