Usage

Import from the package root

Every public component is exported from fractalsvelte. Import only the pieces a view needs.

<script lang="ts">
	import { Button, Card, Input } from 'fractalsvelte';

	let email = $state('');
</script>

<Card>
	<Input bind:value={email} name="email" placeholder="you@example.com" />
	<Button onclick={() => console.log(email)}>Continue</Button>
</Card>

bind:value, bind:checked, and bind:open are available on components whose state is intended to be controlled by the parent. Consult each component’s Props section for the supported bindings.

Choose the simple API first

Many components expose a concise, self-contained API for the most common case.

<script lang="ts">
	import { DropdownMenu } from 'fractalsvelte';
</script>

<DropdownMenu
	label="Actions"
	items={[
		{ value: 'edit', label: 'Edit' },
		{ value: 'archive', label: 'Archive' }
	]}
/>

This is the right choice when a component’s provided structure matches your interface.

Use compound APIs for custom structure

Overlays and menus also provide named primitives. These let you place labels, separators, grouped actions, and custom triggers where your design needs them.

<script lang="ts">
	import {
		DropdownMenuContent,
		DropdownMenuItem,
		DropdownMenuRoot,
		DropdownMenuSeparator,
		DropdownMenuTrigger
	} from 'fractalsvelte';
</script>

<DropdownMenuRoot>
	<DropdownMenuTrigger>Actions</DropdownMenuTrigger>
	<DropdownMenuContent>
		<DropdownMenuItem value="edit">Edit</DropdownMenuItem>
		<DropdownMenuSeparator />
		<DropdownMenuItem value="archive">Archive</DropdownMenuItem>
	</DropdownMenuContent>
</DropdownMenuRoot>

Compound components must remain inside their corresponding root. The root owns shared state such as whether the surface is open and which item is selected.

Use component documentation as the API reference

The Components list in the sidebar is the source of truth for each component’s demo, install command, usage, props, and supported variants. Start with a demo, then use the Props table to decide whether the simple or compound API fits your UI.

TypeScript and JavaScript

Fractalsvelte is authored in TypeScript and ships declarations, but it can be imported from JavaScript Svelte applications too. TypeScript is recommended because it exposes component props, callback signatures, and the available compound exports in your editor.