Getting started
Installation
One command, or four steps by hand.
The short way
bunx omaris init That installs the package, wires the stylesheet and the provider into your app, and writes an AGENTS.md so an AI agent working in the project reads the conventions before it writes anything. Run it in an existing SvelteKit app; it will tell you what it is about to change and skip anything already done.
By hand
1. Install it.
bun add omaris 2. Import the stylesheet — this is the only stylesheet omaris has, and it carries the tokens, the type scale and the Tailwind theme.
'omaris/app.css'; Add the fonts too if you want Geist, which is what the type scale is drawn for:
'omaris/fonts.css'; 'omaris/app.css'; 3. Wrap the app once in OmarisProvider. It mounts the hosts that toasts and dialogs render into, and starts the theme.
<script> import '../app.css'; import { OmarisProvider } from 'omaris'; let { children } = $props();</script><OmarisProvider> {@render children()}</OmarisProvider> 4. Use it.
<script> import { Button, Card, CardContent } from 'omaris';</script><Card> <CardContent> <Button>Ship it</Button> </CardContent></Card> Make it installable
bunx omaris pwa One command turns the app into a PWA — manifest, icons, offline service worker. bunx omaris native takes the same app to the Play Store and the App Store. See On a phone.
Charts and maps
Both live behind their own entry points, because layerchart and maplibre-gl together are tens of megabytes and nobody importing a Button should pay for them. They are optional peer dependencies, so they install only if you ask.
bun add layerchart d3-shape # for omaris/chartbun add maplibre-gl # for omaris/map Requirements
| Svelte | 5.0 or later |
| SvelteKit | 2.0 or later |
| Tailwind CSS | 4.0 or later |