A simple, elegant Svelte 5 component library
Versatile button with variants, sizes, and states.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Button label text |
| variant | 'ghost' | 'outline' | 'solid' | 'solid' | Visual style |
| color | 'default' | 'warning' | 'primary' | 'default' | Color theme |
| size | 'small' | 'medium' | 'large' | 'medium' | Button size |
| disabled | boolean | false | Disable interactions |
| loading | boolean | false | Show loading spinner |
| icon | string | - | Icon name |
| onClick | function | - | Click handler |
A button with two independent clickable zones separated by a divider. The icon zone can open a dropdown menu or act as a second action.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Main button label |
| variant | 'ghost' | 'outline' | 'solid' | 'solid' | Visual style |
| color | 'default' | 'warning' | 'primary' | 'default' | Color theme |
| size | 'small' | 'medium' | 'large' | 'medium' | Button size |
| items | SplitButtonItem[] | - | Dropdown menu items |
| iconPosition | 'start' | 'end' | 'end' | Position of trigger zone |
| onClick | function | - | Main button click handler |
| onIconClick | function | - | Trigger click handler |
| onSelect | function | - | Menu item selection handler |
console.log('Save')}
onSelect={({ value }) => console.log('Selected:', value)}
/> Semantic heading component with configurable levels.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Heading text |
| level | 1 | 2 | 3 | 4 | 5 | 6 | 1 | HTML heading level |
Text component for paragraphs and inline text.
Inline editable text field.
Current value: Click to edit
SVG icon component with built-in icon library.
Text input with label, validation, and password support.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Input label |
| placeholder | string | - | Placeholder text |
| type | string | 'text' | Input type |
| value | string | number | '' | Input value (bindable) |
| error | string | - | Error message |
| disabled | boolean | false | Disable input |
| icon | string | - | Leading icon name |
Multi-line text input.
Number input with increment/decrement controls.
Value: 42
Dropdown select with options.
Single checkbox for boolean values.
Checked: false
Group of checkboxes for multiple selection.
Selected: none
Single radio button.
Group of radio buttons for single selection.
Toggle switch for on/off states.
Enabled: false
Range slider for numeric values.
Value: 50
Star rating input.
Rating: 3/5
Tile-based selection with animated feedback. Supports single or multiple selection, horizontal or vertical layout.
Selected: paste
Selected: direct
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Label above the tiles |
| options | TileOption[] | [] | Array of options with label, value, subtitle |
| value | string | number | array | - | Selected value(s), bindable |
| direction | 'horizontal' | 'vertical' | 'vertical' | Layout direction |
| multiple | boolean | false | Allow multiple selections |
| disabled | boolean | false | Disable all tiles |
| error | string | - | Error message |
File upload with drag and drop support.
Input for managing string arrays as visual chips. Add with Enter, Tab, or comma. Remove with backspace or click the X.
Values: svelte, typescript
Values: tag1, tag2, tag3
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Input label |
| values | string[] | [] | Array of chip values (bindable) |
| placeholder | string | - | Placeholder text |
| maxItems | number | - | Maximum number of chips |
| maxChipLength | number | - | Maximum length of each chip value |
| allowDuplicates | boolean | false | Allow duplicate values |
| error | string | - | Error message |
| disabled | boolean | false | Disable input |
| readonly | boolean | false | Read-only mode |
console.log('Tags:', values)}
/> Display key metrics with labels and values.
Inline code display.
const greeting = 'Hello, World!';Syntax highlighted code blocks.
function greet(name: string): string {
return `Hello, ${name}!`;
}Container section with optional title.
Content inside a section component.
Card container with header and expandable content.
Card content goes here.
Click the arrow to expand.
CSS grid layout container.
Modal dialog overlay.
Confirmation dialog with accept/reject actions.
Flexible list container.
List with checkbox items.
List of cards with score indicators.
Pre-built icon components for common use cases.
All available icons for the <Icon> component. Icons sourced from Iconoir.