Design

Components

Shared Svelte 5 components from packages/components/. Live demos with copy-paste usage snippets.

Button

Five variants, three sizes, and disabled state.

Variants

Sizes

Disabled

import { Button } from '@yotoshelf/components';

<Button variant="primary" size="md">Click me</Button>
<Button variant="destructive" disabled>Delete</Button>

Card

Surface container with optional padding and link behaviour.

Default

Sunset Sounds

A curated playlist of calm evening tracks for winding down.

Clickable Card

This card is a link — hover to see the lift effect.

No Padding

Content fills edge to edge.

import { Card } from '@yotoshelf/components';

<Card>Content</Card>
<Card href="/link">Clickable</Card>
<Card padding={false}>Edge to edge</Card>

Badge

Five variants for communicating status at a glance.

Ready Ready Draft Error v0.1.0 New

import { Badge } from '@yotoshelf/components';

<Badge variant="success">Ready</Badge>
<Badge variant="warning">Draft</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">v0.1.0</Badge>

Input

Text field with label, error, and disabled states.

Card title

Playlist name

This name is already taken.

Username

import { Input } from '@yotoshelf/components';

<Input label="Title" placeholder="..." bind:value />
<Input label="Name" error="Already taken." bind:value />
<Input label="User" disabled />

Dialog

Modal overlay with title, body, and footer slot.

import { Dialog, Button } from '@yotoshelf/components';

let open = $state(false);

<Button onclick={() => open = true}>Open</Button>

<Dialog bind:open title="Are you sure?">
  {#snippet children()}Body text{/snippet}
  {#snippet footer()}
    <Button variant="ghost" onclick={() => open = false}>Cancel</Button>
    <Button variant="destructive" onclick={() => open = false}>Confirm</Button>
  {/snippet}
</Dialog>