# omaris

A Material 3 Expressive component library for SvelteKit, v0.1.14 — themeable,
fast, and built for dashboards and the agents that write them.

This file is an index, not the API. Each link below is one page of generated
Markdown: every prop, its type, its default, and runnable examples. Read the
pages for the components you are actually using.

- Everything in one file, API and guides: /llms-full.txt
- Offline, after `npm i omaris`: `node_modules/omaris/docs/` — start at `index.md`

## Rules that apply to every component

- Import from `omaris`. Charts are `omaris/chart` and maps are `omaris/map`.
- `class` styles the root element and is merged last, so it always wins.
- Anything deeper is a key on `classes`: `classes={{ control: 'font-mono' }}`.
- Never guess a prop name or a `classes` part name. Both are on the page.
- Every page opens with "Use it for" and "Not for". Read them before choosing
  a component; a "Not for" line names the component to use instead.

## Pages

One line per page: a page documents a directory, so a family of exports —
named after the `·` — shares one.

- [Accordion](/docs/components/accordion.md) — MD3 expansion panels · AccordionItem
- [AI Chat](/docs/components/ai-chat.md) — A conversation with a model — the thread, the streaming reply, the… · AiChat
- [AI Image](/docs/components/ai-image.md) — A picture made from a sentence — the frame, the prompt bar,… · AiImage
- [Alert](/docs/components/alert.md) — MD3's banner, for a message that belongs to the page rather than…
- [App Shell](/docs/components/app-shell.md) — The frame a dashboard sits in: a sidebar that stays put and… · AppShell, AppShellContent, AppShellFooter, AppShellHeader, AppShellMain, AppShellSidebar
- [Avatar](/docs/components/avatar.md) — image, initials, or icon, in that order of preference · AvatarGroup
- [Badge](/docs/components/badge.md) — a status pill, or the count that rides on an icon
- [Breadcrumb](/docs/components/breadcrumb.md) — Breadcrumbs
- [Button](/docs/components/button.md) — MD3 buttons, the Expressive way
- [Button Group](/docs/components/button-group.md) — MD3 button group — a row of buttons that reads as one… · ButtonGroup
- [Calendar](/docs/components/calendar.md) — Month grid — one date, a range, or a handful of dates
- [Card](/docs/components/card.md) — MD3 card — elevated, filled, or outlined · CardContent, CardFooter, CardHeader, CardMedia
- [Carousel](/docs/components/carousel.md) — MD3 carousel
- [Charts](/docs/components/chart.md) — Twelve chart types and a sparkline, on layerchart · LineChart, AreaChart, BarChart, CandlestickChart, ChartFrame, ComboChart, FunnelChart, Gauge, PieChart, RadarChart, RadialBarChart, ScatterChart, Sparkline, TreemapChart
- [Checkbox](/docs/components/checkbox.md) — MD3 checkbox
- [Chip](/docs/components/chip.md) — MD3 chip — assist, filter, input and suggestion, in one component · ChipGroup
- [Code Editor](/docs/components/code-editor.md) — A code editor with no editor in it · CodeEditor
- [CodeBlock](/docs/components/code-block.md) — A code block: highlighted, copyable, and themed like everything else
- [Collapsible](/docs/components/collapsible.md) — A single disclosure: a header you press and the block it shows…
- [Color Picker](/docs/components/color-picker.md) — A colour picker that thinks in OKLCH, because this library does · ColorPicker
- [Combobox](/docs/components/combobox.md) — type to search, arrow to the one you want, Enter to take…
- [Command Palette](/docs/components/command-palette.md) — ⌘K — a search field over every action in the app, opened… · CommandPalette
- [Context Menu](/docs/components/context-menu.md) — The right-click menu · ContextMenu
- [Contribution Graph](/docs/components/contribution-graph.md) — The activity calendar: one square per day, a year across · ContributionGraph
- [Data List](/docs/components/data-list.md) — Key/value details — an order's number, status and total; a profile's email,… · DataList, DataListItem
- [Date Field](/docs/components/date-field.md) — A date input: a field that shows the date in the page's… · DateField
- [Date Range Field](/docs/components/date-range-field.md) — A date-range input for a dashboard's filter bar: a field that reads… · DateRangeField
- [Device Mockup](/docs/components/device-mockup.md) — A device drawn around whatever you put on its screen · DeviceMockup
- [Dialog](/docs/components/dialog.md) — MD3 dialog, on the native `<dialog>` element
- [DiffViewer](/docs/components/diff-viewer.md) — A diff, unified or side by side, with the syntax colouring the…
- [Divider](/docs/components/divider.md) — MD3 divider — a hairline that separates content without dividing the layout
- [Dock](/docs/components/dock.md) — The macOS dock, in Material · DockDivider, DockItem
- [Drawing Board](/docs/components/drawing-board.md) — An infinite canvas you can actually draw on: pen, shapes, arrows, text… · DrawingBoard
- [Emoji Picker](/docs/components/emoji-picker.md) — The emoji keyboard: search, categories, skin tone and a memory of what… · EmojiPicker, Emoji, EmojiButton
- [Empty](/docs/components/empty.md) — Empty state
- [FAB](/docs/components/fab.md) — MD3 floating action button · Fab
- [Field](/docs/components/field.md) — the label, the help line and the error, around any control
- [File Upload](/docs/components/file-upload.md) — A dropzone that takes files from all three places people have them:… · FileUpload
- [Gauge](/docs/components/gauge.md) — A radial gauge — one number against the range it lives in
- [Icon Button](/docs/components/icon-button.md) — MD3 icon button · IconButton
- [Image Cropper](/docs/components/image-cropper.md) — Crop an image by moving the image, not the box · ImageCropper
- [Image Viewer](/docs/components/image-viewer.md) — tap a picture and it lifts off the page into a full-screen,… · ImageViewer, ImageViewerItem
- [Index Scrubber](/docs/components/index-scrubber.md) — The A-Z rail down the side of a long list — letters… · IndexScrubber
- [Inline Edit](/docs/components/inline-edit.md) — Click the text, it becomes a field · InlineEdit
- [JsonViewer](/docs/components/json-viewer.md) — A JSON tree you can actually read: collapsible, searchable, and coloured with…
- [Kanban](/docs/components/kanban.md) — A board of columns you drag cards between
- [Kbd](/docs/components/kbd.md) — A key cap — the `<kbd>` a shortcut is drawn with
- [Label](/docs/components/label.md) — A form label
- [List](/docs/components/list.md) — MD3 lists — one to three lines per row, and rows you… · ListItem, Reorder, ReorderHandle, SwipeItem
- [LogViewer](/docs/components/log-viewer.md) — A log console: levels, filtering, search, ANSI colour, expandable rows and a…
- [Magnifier](/docs/components/magnifier.md) — A loupe that really magnifies: live text scaled by the browser, so…
- [Maps](/docs/components/map.md) — Declarative MapLibre: markers, clusters, routes, heatmaps, drawing and geofences · Map, MapCluster, MapControls, MapDraw, MapGeofence, MapGeoJson, MapHeatmap, MapLayer, MapPicker, MapPopup, MapRoute, MapSource, MapVehicle, MapVehicleIcon, Marker
- [Masonry](/docs/components/masonry.md) — A masonry grid — the photo wall
- [Menu](/docs/components/menu.md) — MD3 menu — a list of actions hanging off a trigger · MenuItem, MenuLabel, MenuSub
- [Multi Select](/docs/components/multi-select.md) — Several values from a list, in one field · MultiSelect
- [Navigation Bar](/docs/components/navigation-bar.md) — MD3 navigation bar — the bottom bar on a phone, 3–5 destinations · NavigationBar, Navigation, NavigationBarItem, NavigationView, NavigationViews
- [Navigation Drawer](/docs/components/navigation-drawer.md) — MD3 navigation drawer — the sidebar of a dashboard, in all three… · NavigationDrawer, NavigationDrawerItem, NavigationDrawerSection
- [Notification Center](/docs/components/notification-center.md) — The bell in the top bar, and everything behind it · NotificationCenter
- [Number Input](/docs/components/number-input.md) — A number field that is a text field underneath · NumberInput
- [OTP Input](/docs/components/otp-input.md) — The one-time code field · OtpInput
- [PageTransition](/docs/components/page-transition.md) — Page transitions — off unless you ask for one
- [Pagination](/docs/components/pagination.md) — Pagination
- [Phone Input](/docs/components/phone-input.md) — A phone field that stores E.164 and lets people type a national… · PhoneInput
- [Picker](/docs/components/picker.md) — The frame a set of wheels sits in: the selection band across… · DatePicker, DateTimePicker, NumberPicker, PickerColumn, TimePicker
- [Popover](/docs/components/popover.md) — A panel that hangs off a trigger and holds whatever you put…
- [Price Input](/docs/components/price-input.md) — A money field: the currency decides the symbol, which side it sits… · PriceInput
- [Progress](/docs/components/progress.md) — MD3 linear progress indicator · CircularProgress
- [Pull to Refresh](/docs/components/pull-to-refresh.md) — The gesture every phone app has: drag the list down to refetch,… · PullToRefresh
- [QR Code](/docs/components/qr-code.md) — A QR code, drawn as vector, encoded here · QrCode
- [Radio](/docs/components/radio.md) — MD3 radio button · RadioGroup
- [Rating](/docs/components/rating.md) — a row of stars, or of any icon you give it
- [Resizable](/docs/components/resizable.md) — A split view whose panels you drag, with a layout it remembers · ResizablePanelGroup, ResizableHandle, ResizablePanel
- [Rich Text Editor](/docs/components/rich-text-editor.md) — A rich text editor that is a `contenteditable` and a toolbar, and… · RichTextEditor
- [Safe Area](/docs/components/safe-area.md) — The padding that keeps an interface out from under the hardware · SafeArea
- [Scroll Area](/docs/components/scroll-area.md) — A scroll container that looks like it belongs: thin, token-coloured bars that… · ScrollArea
- [Search Bar](/docs/components/search-bar.md) — MD3 search — the bar and the view it opens into · SearchBar
- [Segmented Button](/docs/components/segmented-button.md) — MD3 segmented button · SegmentedButton
- [Select](/docs/components/select.md) — the Input's frame around a styled list of values
- [Shape](/docs/components/shape.md) — The Material 3 shape library, as a box you can put things…
- [Share](/docs/components/share.md) — The share sheet — a bottom sheet on a phone, a centred…
- [Sheet](/docs/components/sheet.md) — MD3 side and bottom sheets
- [Skeleton](/docs/components/skeleton.md) — Skeleton placeholder
- [Slider](/docs/components/slider.md) — MD3 Expressive slider · RangeSlider
- [Spinner](/docs/components/spinner.md) — A small busy indicator for inline use — at the end of…
- [Splash Screen](/docs/components/splash-screen.md) — The screen an app shows before it has anything else to show… · SplashScreen
- [Split Button](/docs/components/split-button.md) — MD3 Expressive split button · SplitButton
- [Stat Card](/docs/components/stat-card.md) — The KPI tile every dashboard opens with: a label, one number, and… · StatCard
- [Status Page](/docs/components/status-page.md) — The page itself: one sentence at the top, and everything else under… · StatusPage, StatusIncident, StatusIndicator, StatusService
- [Stepper](/docs/components/stepper.md) — Wizard progress — where you are in a checkout, an onboarding, a… · StepperItem
- [Switch](/docs/components/switch.md) — MD3 switch
- [Table](/docs/components/table.md) — Data table · TableFilterControl
- [Table of Contents](/docs/components/toc.md) — The “on this page” rail, with a marker that slides onto the… · Toc
- [Tabs](/docs/components/tabs.md) — MD3 tabs — a `TabList` of `Tab`s over one `TabPanel` per tab · Tab, TabList, TabPanel, TabPanels
- [Tags Input](/docs/components/tags-input.md) — Free-form tags, typed into one field · TagsInput
- [Text](/docs/components/text.md) — the one component every string in the app goes through, instead of…
- [Text Field](/docs/components/input.md) — Text field · Input
- [Textarea](/docs/components/textarea.md) — Multi-line text field
- [Theme Settings](/docs/components/theme-settings.md) — A ready-made appearance screen for the theme store · ThemeSettings
- [Timeline](/docs/components/timeline.md) — An activity feed or an order's history: events in order, each on… · TimelineItem
- [Toast](/docs/components/toast.md) — One toast card · Toaster
- [Tooltip](/docs/components/tooltip.md) — MD3 tooltip — plain and rich
- [Top App Bar](/docs/components/top-app-bar.md) — MD3 top app bar — small, medium, large and center-aligned · TopAppBar
- [Tour](/docs/components/tour.md) — A guided tour: a spotlight on one thing at a time, with…
- [Tree View](/docs/components/tree-view.md) — A tree of rows you can open, close and walk with the… · TreeView
- [VideoPlayer](/docs/components/video-player.md) — A video player with its own chrome
- [Virtual List](/docs/components/virtual-list.md) — A windowed list: ten thousand rows, and only the thirty on screen… · VirtualList
- [Workspace](/docs/components/workspace.md) — A dockable workspace: tabbed panels split any way, dragged anywhere, floated into… · WorkspacePanel

## Guides

How to build with it: choosing between components, laying out a screen,
forms, feedback, and the mistakes everyone makes once.

- [Introduction](/docs/introduction.md) — What omaris is, what it assumes, and whether it is the right fit.
- [Installation](/docs/installation.md) — One command, or four steps by hand.
- [The provider](/docs/provider.md) — What OmarisProvider gives you, and why it goes at the root.
- [Start a project](/docs/start-a-project.md) — From an empty folder to a first screen, and two ways to shape what comes after.
- [On a phone](/docs/mobile.md) — A PWA in one command, an APK in one more, the stores after that.
- [Upgrading](/docs/upgrading.md) — What a new version changes on its own, and the one line that keeps the old behaviour.
- [Principles](/docs/principles.md) — Five rules that make a screen built from these parts look like one product.
- [Choosing a component](/docs/choosing-a-component.md) — The look-alikes, told apart. Find the situation, take the component.
- [Building a screen](/docs/building-a-screen.md) — Shell, rhythm, surfaces, the four states, and the phone — in the order you build them.
- [Forms](/docs/forms.md) — Labels, help, errors, layout and the one submit button — the form most apps need, done once.
- [Making it look designed](/docs/look.md) — Personality first, one hero, space over lines, two greys, and the AI look to take out.
- [Feedback](/docs/feedback.md) — What happened, and what to show for it — toast, alert, dialog, progress, and when to confirm.
- [Footguns](/docs/footguns.md) — The mistakes that look right and aren’t — one list, the same one the CLI writes into AGENTS.md.
- [Styling and overrides](/docs/styling.md) — class, classes, and the one merge rule that catches everyone.
- [Theming](/docs/theming.md) — Ten presets, or a hue and two multipliers of your own.
- [Design tokens](/docs/tokens.md) — The colour roles, surface tiers, elevation and shape scale — and why never to use a raw value.
- [Typography](/docs/typography.md) — Material's five type roles, Geist, and Arabic that is actually set right.
- [Icons](/docs/icons.md) — omaris ships none, on purpose. Any set works.
- [Charts and maps](/docs/charts-and-maps.md) — Both are opt-in, behind their own entry points.
- [Accessibility](/docs/accessibility.md) — What omaris handles for you, and the three things it cannot.
- [AI in an afternoon](/docs/ai.md) — A chat and an image generator, wired to any model, with the key on the server.
- [Sound](/docs/sound.md) — Interaction cues — the third channel, after the ripple you see and the buzz you feel.
- [Patterns](/docs/patterns.md) — Whole apps, each on its own URL, built only from what this library exports.
- [Runes](/docs/runes.md) — The reactive helpers that are not components — URL state, breakpoints, undo, and the rest.
- [queryState](/docs/query-state.md) — Filters, search terms and page numbers that live in the URL — nuqs for SvelteKit.
- [screen](/docs/screen.md) — Phone, tablet or desktop — the layout decision, not the breakpoint.
- [debounced & throttled](/docs/debounced.md) — A value that lags on purpose, and the pending flag a spinner belongs in.
- [elementSize](/docs/element-size.md) — How wide this is, not how wide the window is — container queries you can branch on.
- [inView](/docs/in-view.md) — On screen — for reveals, lazy loading, infinite lists and scroll-spy.
- [scroll](/docs/scroll.md) — Position, direction and progress — the hide-on-scroll bar, the read meter, the jump to top.
- [clipboard](/docs/clipboard.md) — Copy — and the “Copied!” that has to follow it.
- [undoable](/docs/undoable.md) — Undo and redo, for any state at all — with steps a person would recognise.
- [network](/docs/network.md) — Online, offline, connection quality — and whether anything is actually reachable.
- [Editor keys](/docs/editor-keys.md) — Every shortcut CodeEditor answers to, vim included.
- [relativeTime](/docs/relative-time.md) — “3 minutes ago”, in English, Arabic, Turkish and Sorani Kurdish — and kept true.