Installation

Get started with Synthax UI in your SvelteKit application.

Prerequisites

• Node.js 18.x or higher
• SvelteKit 2.x with Svelte 5
• Tailwind CSS 4.x

1. Install the package

pnpm add @synthaxai/ui lucide-svelte

2. Import styles

Add the component library styles to your app.css:

@import 'tailwindcss';
@import '@synthaxai/ui/styles';

3. Use components

Import and use components in your Svelte files:

<script lang="ts">
  import { Button, Card, TextInput } from '@synthaxai/ui';
</script>

<Card>
  <TextInput label="Patient Name" />
  <Button variant="primary">Save</Button>
</Card>

TypeScript Support

All components are fully typed. Import types for props and other definitions:

import type {
  Size,
  Variant,
  Status,
  TableColumn,
  Step
} from '@synthaxai/ui';

Utility Functions

The library also exports utility functions for building custom components:

import {
  cn,                    // Class name merging
  createFocusTrap,       // Keyboard focus trap
  announce,              // Screen reader announcements
  prefersReducedMotion   // Motion preferences
} from '@synthaxai/ui';

Peer Dependencies

svelte and lucide-svelte are peer dependencies. They should be installed in your project.