# 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`. - Svelte 5 only: runes (`$state`, `$derived`, `$effect`, `$props`, `$bindable`), snippets and callback props. Never write Svelte 4 syntax: no `export let`, no `on:click` (use `onclick`), no `` (use snippets and `{@render}`), no `createEventDispatcher`, no `$:`. Svelte's own tools for agents, including an MCP server and an autofixer, are listed at https://svelte.dev/docs/ai. - 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`. Form fields are the exception: their attributes and `ref` go to the native control (`name`, `placeholder`, `autocomplete` reach the ``), while `class` and `style` stay on the field. - Form fields validate with the HTML constraints first (`required`, `minlength`, `maxlength`, `pattern`, `type="email"`), then `rules` (functions returning `true` or a message), and show `error` from outside (a server's answer) as given. Messages appear when the user leaves a field they changed, then follow every change. - 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. - Style your own elements with the theme's CSS variables, never fixed values: `--sv-color-*` for colour, `--sv-space-*` for spacing, `--sv-radius-md` for one-line controls. A theme may make `--sv-radius-md` a pill, so a box that grows with its content takes `min(var(--sv-radius-md), var(--sv-radius-lg))`. ## 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 `
`, 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. ## Forms - [Form and validation](./forms/form): A `
` that checks its fields when it is submitted. - [TextField](./forms/text-field): A single line of text with a label, a hint and validation. - [Textarea](./forms/textarea): Several lines of text with a label, a hint and validation. - [NumberField](./forms/number-field): A number typed in the app's locale, stepped with the arrow keys or the buttons, and checked against `min`, `max` and `step`. - [NativeSelect](./forms/native-select): One choice from a list, as the platform's own `