@ibis-design/svelte

Svelte 5 component library for the IBIS design system. Provides primitives (Button, Card) and full layout shells (AuthLayout, AppLayout, DashboardLayout) styled via CSS custom properties from @ibis-design/css.

Requirements

• Svelte 5 (runes and snippets; no slots).
• @ibis-design/css — design tokens. The consuming application must load the token stylesheet once so :root variables are available.

Installation

npm install @ibis-design/svelte @ibis-design/css

Token CSS

Import the design tokens in your application entry or root layout so all components receive the correct variables:

// e.g. in your app entry (main.ts, +layout.svelte, or App.svelte)
import '@ibis-design/css';
// or
import '@ibis-design/css/ibis-design.css';

Without this import, components will not have colors, spacing, or typography from the design system.

Usage

Primitives

Button — use the children snippet for the label:

<script>
  import { Button } from '@ibis-design/svelte';
</script>

<Button variant="primary" size="md">Submit</Button>
<Button variant="secondary" size="sm">Cancel</Button>

Card — use the children snippet for content:

<script>
  import { Card } from '@ibis-design/svelte';
</script>

<Card>
  <p>Card content</p>
</Card>

Layouts

Layouts use snippets (Svelte 5). Pass snippet props for header, sidebar, and main content. Content between the component tags is the children snippet.

AppLayout — generic app shell with optional header, sidebar, main, and footer:

<script>
  import { AppLayout } from '@ibis-design/svelte';

  // Define snippets and pass as props; content between tags is children
</script>

<AppLayout
  header={headerSnippet}
  sidebar={sidebarSnippet}
  footer={footerSnippet}
>
  <p>Main page content</p>
</AppLayout>

With inline snippets:

<script>
  import { AppLayout } from '@ibis-design/svelte';
</script>

{#snippet header()}
  <nav>App header</nav>
{/snippet}
{#snippet sidebar()}
  <aside>Sidebar</aside>
{/snippet}

<AppLayout header={header} sidebar={sidebar}>
  <p>Main content</p>
</AppLayout>

AuthLayout — centered single-column layout for login/signup:

<script>
  import { AuthLayout } from '@ibis-design/svelte';
</script>

<AuthLayout logo={logoSnippet} footer={footerSnippet}>
  <form>Login form</form>
</AuthLayout>

DashboardLayout — dashboard shell with themed header and sidebar (same snippet props as AppLayout).

Exports

• Components: Button, Card, AuthLayout, AppLayout, DashboardLayout
• Types: ButtonVariant, ButtonSize, AuthLayoutProps, AppLayoutProps, DashboardLayoutProps (from @ibis-design/svelte)

Build

From the package directory:

npm run build

From the monorepo root:

npm run build --workspaces

Type checking

npm run check

Runs svelte-check with the package tsconfig.json.