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 <ThemeProvider/>. All svxui components must be used inside it.

theme.default.css and tokens.css are required. See Styling for the full list of available CSS files.

src/routes/+layout.svelte

<script>
    import 'svxui/styles/theme.default.css'; // Required 
    import 'svxui/styles/tokens.css'; // Required 
    import { ThemeProvider } from 'svxui'; 

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

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

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:

// Layouts
import { Box } from 'svxui/layouts/box';
import { Flex } from 'svxui/layouts/flex';
import { Grid } from 'svxui/layouts/grid';

// 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';