# Sveltier

> A Svelte 5 UI framework with five built-in design languages, a zero-dependency theme engine and flash-free server-side theming.

Install `sveltier`, wrap the app in `UIProvider` with at least one theme pack (for example `monolith` from `sveltier/themes/monolith`), and import components from `sveltier`.

- Every component takes the same names for the same things: `variant` (elevated, flat, tonal, outlined, text, plain), `size` (xs to xl), `density` (compact, default, comfortable), `color` (an intent such as primary or error, neutral, or a custom colour), `rounded`, `disabled`, `loading`.
- Content goes in snippets (`children`, `prepend`, `append`, `actions`), events are callback props (`onclick`), and two-way values use `bind:` (`bind:value`, `bind:selected`, `bind:open`).
- Every component passes other attributes to its root element, merges `class`, and exposes the element as a bindable `ref`.
- Defaults for a whole app or section go in the `defaults` of `UIProvider` or a `DefaultsProvider`, by component name; a prop on the component still wins.

## Getting started

- [Installation](./getting-started/installation)
- [Quick start](./getting-started/quick-start)
- [Fonts](./getting-started/fonts)
- [Server-side rendering](./getting-started/server-rendering)

## Theming

- [Overview](./theming)
- [Custom themes](./theming/custom-themes)
- [Theme contract](./theming/contract)
- [Colours](./theming/colors)
- [Design scale](./theming/scale)

## Theme packs

- [All packs](./theme-packs)
- [Monolith](./theme-packs/monolith)
- [Heritage](./theme-packs/heritage)
- [Aurora](./theme-packs/aurora)
- [Maison](./theme-packs/maison)
- [Milano](./theme-packs/milano)

## Core

- [Defaults](./core/defaults)
- [Shared props](./core/shared-props)
- [Display](./core/display)
- [Locale](./core/locale)
- [Building components](./core/building-components)

## Components

- [Alert](./components/alert): A message about something that happened or needs attention.
- [Avatar](./components/avatar): A picture of a person or an account: an image, or initials or an icon when there is none or it fails to load.
- [Badge](./components/badge): A count or a dot pinned to the top end corner of its content, or standing alone in a line when it has none.
- [Button](./components/button): A button, or a link that looks like one (`href`).
- [ButtonGroup](./components/button-group): Buttons joined into one control: shared borders, square inner corners, and the same variant, size, density and colour unless a Button says otherwise.
- [Card](./components/card): A surface that groups content about one thing: a header, the content and actions.
- [Chip](./components/chip): A compact label: a tag (optionally `closable`), a filter that toggles (`selected`), an action (`onclick`) or a link (`href`).
- [Divider](./components/divider): A hairline between groups of content: an `<hr>`, which assistive technology reads as a separator.
- [Icon](./components/icon): An icon: SVG path data, or any icon of your own as `children`.
- [List](./components/list): A list of rows: `ListItem`s.
- [Progress](./components/progress): A horizontal progress bar.
- [SegmentedControl](./components/segmented-control): One choice among a few options, side by side, as a radio group with one tab stop.
- [Skeleton](./components/skeleton): A placeholder in the shape of content that is still loading.
- [Tabs](./components/tabs): Tabs and the panel of the selected one.

## Primitives

- [Focus](./primitives/focus)
- [Layers](./primitives/layers)
- [Portal and modality](./primitives/modality)
- [Positioning](./primitives/positioning)
- [Keyboard](./primitives/keyboard)
- [Motion](./primitives/motion)
- [Virtual lists](./primitives/virtual-lists)

## Accessibility

- [Overview](./accessibility)

## API

- [UIProvider](./api/ui-provider)
- [ThemeProvider](./api/theme-provider)
- [useTheme](./api/use-theme)
- [defineTheme](./api/define-theme)
- [themeCss and themeScript](./api/theme-css)
- [DefaultsProvider](./api/defaults-provider)
- [useDefaults](./api/use-defaults)
- [sharedClasses](./api/shared-classes)
- [useDisplay](./api/use-display)
- [useLocale](./api/use-locale)

## Optional

- [Full reference](./llms-full.txt): setup, conventions, and every component's props, generated from its types