# Introduction

> What Svelte Lean is and is not, who it is for, the two products, how behavior is shipped, what exists today and where to go next.

Page: https://svelte-lean.vercel.app/docs · Markdown: https://svelte-lean.vercel.app/docs.md · Index: https://svelte-lean.vercel.app/llms.txt

Svelte Lean is a set of UI primitives and a data table for Svelte 5 that let the browser do the work and add JavaScript only where the platform has no behavior.

- **Primitives**: 50 accessible primitives. 27 are native markup with no runtime; the others register one shared behavior per page, whatever the number of instances.
- **Table**: `<DataTable />` renders a native `<table>` and grows into a data grid through props and separate entry points.
- **Styles**: optional CSS, design tokens plus one file per primitive.

## Install

```bash
npm install @svelte-lean/primitives @svelte-lean/styles
```

```bash
npm install --save-dev @svelte-lean/vite
```

Add the plugin. It finds the `data-slean` markers in your files at build time and imports the behaviors they need, nothing else.

`vite.config.ts`

```ts
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { svelteLean } from '@svelte-lean/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [svelteLean(), sveltekit()]
});
```

## First component

A button with a hint that opens a modal dialog. Hover or focus the button, then press it.

```svelte
<script lang="ts">
	import '@svelte-lean/styles/button.css';
	import '@svelte-lean/styles/dialog.css';
	import '@svelte-lean/styles/field.css';
	import '@svelte-lean/styles/hint.css';
	import '@svelte-lean/styles/input.css';
</script>

<button
	type="button"
	data-slean="button"
	data-slean-hint="Invite someone to this project"
	commandfor="invite"
	command="show-modal"
>
	Invite
</button>

<dialog id="invite" data-slean="dialog" aria-labelledby="invite-title">
	<header>
		<h2 id="invite-title">Invite a member</h2>
	</header>
	<div data-slean="field">
		<label for="invite-email" data-slean-part="label">Email</label>
		<input id="invite-email" type="email" name="email" data-slean="input" />
	</div>
	<footer>
		<button type="button" data-slean="button" commandfor="invite" command="close">Done</button>
	</footer>
</dialog>
```

| Part | Tier | Who does the work | Behavior JavaScript |
| --- | --- | --- | --- |
| [Dialog](https://svelte-lean.vercel.app/primitives/dialog.md) | 0 | The browser: `<dialog>` and `command` give the top layer, Escape and focus return. | 0 B brotli |
| [Hint](https://svelte-lean.vercel.app/primitives/hint.md) | 1 | One shared behavior, added by the plugin because the file contains `data-slean-hint`. | 2687 B brotli |

No component imports, no wrappers, no ids generated at hydration: the markup is the API, and it renders the same on the server.

## What a page ships

- Native primitives only (button, dialog, popover): 0 B of Svelte Lean JavaScript in the production fixture.
- A page with tabs: the tabs behavior and the shared kernel, 1839 B brotli, for one tab list or a thousand.

How this is shipped and verified: [Distribution](https://svelte-lean.vercel.app/docs/distribution.md) and [Performance](https://svelte-lean.vercel.app/performance.md).

## Packages

| Package | Role |
| --- | --- |
| [`@svelte-lean/primitives`](https://svelte-lean.vercel.app/primitives.md) | Contracts and types for all 50 primitives; 17 Tier 1 and 6 Tier 2 behaviors as side-effect register modules |
| [`@svelte-lean/table`](https://svelte-lean.vercel.app/table.md) | \<DataTable /\>, createTable(), optional modules |
| [`@svelte-lean/styles`](https://svelte-lean.vercel.app/styling.md) | Optional CSS: tokens, base, one file per primitive |
| [`@svelte-lean/vite`](https://svelte-lean.vercel.app/docs/architecture/build-time-discovery.md) | Build-time behavior discovery, manifest, build report |
| [`@svelte-lean/core`](https://svelte-lean.vercel.app/docs/architecture/dom-protocol.md) | Behavior registry, shared event router, DOM and keyboard helpers, diagnostics |

Version `0.17.4`, a preview; the release stage is recorded in docs/release.md. Not yet available: Firefox and WebKit test runs, screen-reader tests, a command-line tool. Every public claim and its evidence: claim registry.

## Next steps

- [Primitives](https://svelte-lean.vercel.app/primitives.md) Every primitive, live, with its cost.
- [Table](https://svelte-lean.vercel.app/table.md) DataTable from a plain table to a data grid.
- [Styling](https://svelte-lean.vercel.app/styling.md) Tokens, themes, Tailwind, owned CSS.
- [Performance](https://svelte-lean.vercel.app/performance.md) What is measured and how.
- [Installation](https://svelte-lean.vercel.app/docs/installation.md) Every package and option.
- [Philosophy](https://svelte-lean.vercel.app/docs/philosophy.md) Why the platform comes first.