Components

An overview of the components in @smalt-ui/core, a UI library for Vue 3 and Nuxt. All components are built on Reka UI (accessibility, keyboard, focus management), styled with design tokens, and isolated from the host app's styles. Each page has live examples and an API table generated directly from the types and JSDoc.

Components are named with the S prefix (SButton, SInput, …) and grouped by purpose.

Basics

Basic building blocks reused by other components.

Button — a button with variants, sizes, and icon slots
Icon — an SVG icon from a name registry (Lucide)
Badge — a compact label or counter
Tag — a removable chip tag (also used in use-tags fields)
Avatar — an avatar with a fallback

Forms

Inputs on the shared SFormField frame (label, hint, error message, a11y relationships).

Base: Form Field
Text: Input (the numeric prop for numeric input, use-tags for tag input), Textarea
Numbers and codes: Number Field (a stepper with buttons), Pin Input
Selection: Select (searchable for search, multiple/use-tags for multiple selection), Autocomplete (suggestions from server-side search results)
Color: Color Field, Color Picker
Toggles: Checkbox, Radio, Switch, Toggle
Value: Slider, Rating