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 with its own tutorial page. Every one is two things at once:

  1. a standalone control you can drop into any Svelte app, and
  2. a grid cell editor - the same component SvGrid mounts when you edit a cell.

That dual nature is the point: the grid stays the flagship, and its editor kit is also a full component library you can use on its own. Every component is theme-driven, accessible, and dependency-free (see below). Try them live under the SvGrid Editors switcher in the examples gallery, or jump straight to any component's tutorial in the catalogue.

Quick start with the CLI. npx @svgrid/ui try calendar opens any component in a sandbox in your browser; npx @svgrid/ui add calendar drops a ready-to-edit starter into your app (and installs the dep). See Add components with the CLI.

The SvGrid UI suite: nine families of components, each usable standalone and as a grid cell editor.

Design principles

The catalogue

Every component has its own tutorial page - what it is, a live demo, the full props table, common patterns, and accessibility notes. The overview link on each group heading is the at-a-glance rollup.

Buttons & toggles

SvButton · SvButtonGroup · SvRepeatButton · SvToggleButton · SvSwitchButton · SvCheckBox · SvRadioGroup · SvRating

Inputs

SvTextInput · SvTextArea · SvNumberInput · SvPasswordInput · SvMaskedInput · SvPhoneInput · SvColorInput · SvOtpInput · SvDurationInput · SvTagsInput

Selection

SvListBox · SvDropDownList · SvComboBox · SvAutoComplete · SvMultiSelect · SvTreeSelect · SvGridSelect · SvGridDropdown · SvCountryInput

Date & time

SvCalendar · SvTimePicker · SvDateTimePicker · SvDateRangeInput

Range & meters

SvSlider · SvGauge · SvProgress · SvCircularProgress · SvSparkline · SvStat

Overlays & menus

SvPopover · SvTooltip · SvModal · SvDrawer · SvToaster · SvContextMenu · SvMenu · SvMenuList

Layout & composite

SvTabs · SvAccordion · SvSplitter · SvDockLayout · SvDockManager · SvCard · SvDivider · SvScrollArea · SvGridChart · SvForm · SvField · SvFileUpload · SvCollapsible · Layout primitives (SvStack · SvGroup · SvSimpleGrid) · Typography (SvTitle · SvText · SvAnchor · SvBlockquote · SvMark · SvList) · Display primitives (SvKbd · SvCode · SvAspectRatio · SvVisuallyHidden)

Feedback & display

SvBadge · SvSkeleton · SvAlert · SvEmptyState · SvChip · SvTimeline · SvAvatar · SvAvatarGroup · SvCarousel · SvSpinner · SvLoadingOverlay · SvResult

SvBreadcrumb · SvPagination · SvStepper · SvNavPane · SvTree · SvCommand · SvTour · SvRichText

As grid cell editors

The date/time controls are the rich-by-default editors for date, datetime and time columns:

<script>
  import { SvGrid } from '@svgrid/grid'
  const columns = [
    { field: 'due', header: 'Due', editorType: 'date' },      // -> SvCalendar popover
    { field: 'at', header: 'At', editorType: 'datetime' },    // -> SvDateTimePicker
    { field: 'start', header: 'Start', editorType: 'time' },  // -> SvTimePicker dial
  ]
</script>

To opt back out to the plain native inputs, use editorType: 'date-native', 'datetime-native' or 'time-native'.

Custom cell editors

Any component - a built-in Sv* control or one you author - can be mounted as a cell editor by registering it under a type name, then naming that type on a column. The grid hands it a uniform context: value plus onChange (update the in-progress value), onCommit (save + stop editing) and onCancel (discard).

<script>
  import { SvGrid, registerCellEditor, SvRating } from '@svgrid/grid'

  // Map the grid's edit context onto the component's props.
  registerCellEditor('stars', {
    component: SvRating,
    props: (ctx) => ({ value: ctx.value, onChange: (v) => ctx.onCommit(v) }),
  })

  const columns = [{ field: 'score', header: 'Score', editorType: 'stars' }]
</script>

registerCellEditor(type, Component) uses the default mapping (spreads value, onChange, onCommit, onCancel); pass a { component, props } object for a custom mapping. Also available: getCellEditor, hasCellEditor, unregisterCellEditor, registeredCellEditorTypes.

Built-in shortcuts. Call registerBuiltinEditors() once to register the config-free editors so columns can use them by name straight away:

import { registerBuiltinEditors } from '@svgrid/grid'
registerBuiltinEditors() // enables editorType 'otp' and 'duration'

const columns = [
  { field: 'code', editorType: 'otp' },
  { field: 'estimate', editorType: 'duration' },
]

It's opt-in (so the components tree-shake when unused). Option/structured editors (SvMultiSelect, SvTreeSelect, SvGridSelect) need their options/nodes/ columns, so register those yourself with a props mapping as shown above.

Related articles