Svelte Component Library
SvGrid UI is the component library inside @svgrid/grid: buttons, text and number inputs, dropdowns, a combo box, date and time pickers, tabs, a tree, modals, drawers, toasts, a schema-driven form and the layout pieces around them. They exist because the grid needed them. Each one is also the editor SvGrid mounts when you edit a cell, so a field in a form and the same field in a table behave the same way, keyboard included.
There is no second package to install and no UI peer dependency. The components style themselves from the --sg-* theme tokens, so the grid's theme restyles the whole page, and each control follows its WAI-ARIA pattern. When you need your own markup, the headless create* cores give you the state, keyboard handling and ARIA without the styles.
Turn it on: import { SvTextInput, SvButton } from '@svgrid/grid'
Install
npm i @svgrid/gridFree and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.
The code
<script lang="ts">
import { SvTextInput, SvDropDownList, SvSwitchButton, SvButton, type ListOption } from '@svgrid/grid'
const plans: ListOption[] = [
{ value: 'free', label: 'Free' },
{ value: 'team', label: 'Team' },
]
let email = $state('')
let plan = $state<string | null>('free')
let notify = $state(true)
</script>
<SvTextInput label="Work email" type="email" bind:value={email} />
<SvDropDownList label="Plan" options={plans} value={plan} onChange={(v) => (plan = v)} />
<SvSwitchButton label="Email me updates" checked={notify} onChange={(v) => (notify = v)} />
<SvButton variant="primary">Create account</SvButton>What you get
- One package - Import the components from @svgrid/grid, next to the grid. No UI peer dependency, no date library and no icon font: the icons are inline SVG.
- Styled by theme tokens - Every component reads --sg-accent, --sg-bg, --sg-border and the rest, so a preset theme or one made in the Theme Builder restyles the whole kit at once.
- Accessible by pattern - Listbox, combobox, radio group, slider, tabs and tree each follow their WAI-ARIA pattern, with roving tabindex where the pattern calls for it.
- Headless when you want it - Each Sv component renders over a create* core such as createListbox. Use the core to draw your own markup with the same state and keyboard model.
- Forms from a schema - SvForm builds a validated form from a field list, with columns, a stepper mode for wizards and repeatable field arrays.
- Try one before you add it - npx @svgrid/ui try calendar opens a component in a browser sandbox, and npx @svgrid/ui add calendar drops a starter file into your app.
Live examples
- Checkout form - A real payment form built entirely from SvGrid UI: SvMaskedInput (card number + expiry + CVC), SvCountryInput (billing country), SvNumberInput (amount), SvSwitchButton (save card) and SvButton - with live card-brand detection and validation. Copy the file and ship it.
- Appointment booking - A scheduling form from SvGrid UI: SvComboBox (service), SvCalendar (date), SvTimePicker (slot), SvButtonGroup (duration), SvNumberInput (guests) and a live summary. The same components SvGrid uses to edit cells, composed into a page.
- Buttons & toggles - The UI kit press/toggle primitives: SvButton (variants/sizes/loading), SvRepeatButton (hold-to-repeat), SvToggleButton, SvSwitchButton, SvCheckBox (+ indeterminate), SvRadioGroup (arrow-key nav) and SvRating (half stars). Theme-driven, standalone or as grid cell controls.
- Text inputs - Typed text controls: SvNumberInput (min/max/step, grouping, precision, spinners), SvPasswordInput (reveal + strength), SvMaskedInput (pattern mask), SvPhoneInput (country dial code + national mask) and SvColorInput (swatch + palette popover). Each a SvGrid cell editor, standalone too.
- Selection controls - List and overlay pickers: SvListBox (inline multi-select), SvDropDownList, SvComboBox (type to filter), SvAutoComplete (free text + suggestions), SvTagsInput (chips) and SvCountryInput (searchable, flags). Every popover portals out of the scroll container. Grid cell editors, standalone too.
- Tabs, tree & form - Composite controls: SvTabs (line + pill, roving keyboard), SvTree (expand/collapse, single-select + cascading tri-state checkboxes) and a schema-driven SvForm that wires the whole kit (inputs, select, switch, date, textarea) with required + custom validation.
- App overlays: drawer, context menu, toasts - SvDrawer (edge side-sheet), SvContextMenu (right-click menu) and the toast() API + SvToaster - all built on the shared focus-trap, scroll-lock and dismissable-layer primitives, so nested overlays close top-first and every toast is announced to screen readers.
- Navigation: breadcrumb, pager, stepper - SvBreadcrumb (collapsing trail), SvPagination (page-range with ellipsis, first/last, prev/next) and SvStepper (linear wizard with completed/active/upcoming states). Pure, keyboard-accessible, theme-token driven.
Documentation
- SvGrid UI - SvGrid UI is the Svelte 5 component suite that ships in the free @svgrid/grid package - 70+ buttons, inputs, pickers, overlays, and layout primitives, each…
- Add components with the CLI - @svgrid/ui gets a SvGrid UI component into your app - and lets you *see* it - in one command.
- Headless editors - Every editor is headless-first, exactly like the grid (createSvGrid / <SvGrid>). Each Sv* component is a thin styled renderer over a framework-free runes…
- SvForm - A schema-driven form that renders the SvGrid UI-kit controls from a FormField[], with labels, required and custom validation, and a submit handler.
- Internationalization & RTL - Every editor in the kit shares one localization + direction contract, so you wire it the same way everywhere.
Related articles
- SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms - Practical tips for the SvGrid UI component kit - SvButton states, a Cmd+K command palette, a virtualized searchable tree, schema-driven forms, a parsing date/time field, and the shared field contract - each with a code snippet.
- The Headless UI Pattern - Separating Logic from Presentation - How SvGrid splits the row-model pipeline from rendering, and when you actually want to reach past the default table and drive the headless layer directly.
Frequently asked questions
Is SvGrid UI a separate package?
No. The components ship in @svgrid/grid, so import { SvButton } from '@svgrid/grid' is all it takes. There is nothing else to install.
Is it free for commercial use?
Yes. The component library is MIT-licensed in @svgrid/grid, with no license key. The paid @svgrid/enterprise package covers grid features such as export and pivot tables.
Does it work with Svelte 5 and SvelteKit?
It is written for Svelte 5 only, with runes and snippets, and drops into a SvelteKit route like any other Svelte component.
Can I use my own markup?
Yes. Every styled component has a headless create* core that returns state, actions and prop getters you spread onto your own elements, with none of the kit's styles.
Does it support right-to-left layouts?
Yes. Pass dir="rtl" to any editor and it mirrors both layout and behavior: arrow keys reverse in tabs, tree and slider, and calendar navigation flips.