135 components · 8 categories

Components

Sveltewind provides primitives and higher-level components for Svelte 5. Browse the components below to find the building blocks for your interface.

Customize components with classes, theme overrides, and variants. Learn more in the usage guide and theming guide.

Browse components

135 components

Forms

Inputs, selections, uploads, and form structure.

Button
October 2026
SunMonTueWedThuFriSat
Calendar
Checkbox

Type to search, or use the arrow keys.

Combobox
Datalist
Datalist
Field
Preferences
Fieldset

Drag files here or choose them from your device.

FileUpload
Form
Label
Account details

Your preferences go here.

Legend
Svelte
MultiSelect
Optgroup
Optgroup
Option
Output
Output
Radio
40
Range

SearchField
Select
Switch

Layout

Containers, surfaces, and semantic page structure.

Article
Article
Aside
Card
Card
Container
Container
Div
Div
Header
Header
Main
Main
Behind
On top
Pile
Section
Section

Navigation

Links, menus, tabs, and steps through an interface.

Data

Tables, lists, and structured information.

Caption
Caption
Colgroup
Colgroup
Page 1 of 2
Datatable
Dd
Dd
Dl
Dl
Dt
Dt
  • First item
  • Second item
Li
  1. First item
  2. Second item
Ol
NameRole
AdaDeveloper
Table
NameRole
AdaDeveloper
Tbody
NameRole
AdaDeveloper
Td
Tfoot
Tfoot
NameRole
AdaDeveloper
Th
NameRole
AdaDeveloper
Thead
NameRole
AdaDeveloper
Tr
  • First item
  • Second item
Ul

Feedback

Status, loading, disclosures, and overlays.

Learn more
Use native keyboard controls to expand this section.
Accordion
Your changes have been saved.
Alert
New
Badge
Learn more

Native disclosure content.

Details
Dialog
Drawer
Meter
Meter
Popover
Progress
Progress
Learn more

Native disclosure content.

Summary
Changes savedYou're ready to keep building.
Toast
Toaster
Tooltip

Typography

Headings, text, quotations, and code.

Abbr
Abbr
Address
Address
Blockquote
Blockquote

First line
Second line

Br
Cite
Cite
const hello = 'world';
Code
hello.ts
Loading...
CodeBlock
Em
Em

H1

H1

H2

H2

H3

H3

H4

H4
H5
H5
H6
H6
Kbd
Kbd
Mark
Mark

Build something beautiful with Sveltewind.

P
const hello = 'world';
Pre
Q
Q
Samp
Samp
Loading...
Shiki
Small
Small
Span
Span
Strong
Strong
Time

Media

Images, avatars, audio, video, and embedded content.

Audio
Avatar
+1
AvatarGroup
Canvas
Canvas
One

Start with a component.

Two

Make it your own.

Three

Share your styles.

Carousel
Figcaption
Figcaption
Figure
Figure
Iframe
Picture
Picture

SVG

Vector shapes, text, gradients, and reusable definitions.

HTML content inside SVG.
ForeignObject
G
A violet rectangle with rounded corners.
SvgDesc
A violet rectangle
SvgTitle
Hello SVG
Text
Along a curve
TextPath
First lineSecond line
Tspan

Theming

Getting started is simple: install the package and you're ready to go.