Skip to content
omaris

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.

src/app.css CSS
@import 'omaris/app.css';

Add the fonts too if you want Geist, which is what the type scale is drawn for:

src/app.css CSS
@import 'omaris/fonts.css';@import 'omaris/app.css';

3. Wrap the app once in OmarisProvider. It mounts the hosts that toasts and dialogs render into, and starts the theme.

src/routes/+layout.svelte Svelte
<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

Svelte5.0 or later
SvelteKit2.0 or later
Tailwind CSS4.0 or later