VelvetKit
Previews
Collapse all
UI
Accordion
Playground
Single (one open at a time)
Multiple (independent items)
FAQ Style
Alert
Playground
All Variants
With Icon
Title Only
With Link
Dismissible
Avatar
Playground
Sizes
Shapes
Colors
With Image
Avatar Group
Playground
Default Stack
With Overflow
Small Stack
Badge
Playground
All Variants
Sizes
With Icon
Banner
Playground
Introduction
Promotion
With Illustration
Breadcrumb
Playground
Default (sm)
Medium (md)
With Avatar
Long Path
Collapsed — middle (default)
Collapsed — start
Collapsed — end
Collapsed (legacy explicit ellipsis)
Button
Playground
All Variants
All Sizes
With Leading Icon
With Trailing Icon
With Both Icons
Icon Only
Loading
Disabled
Button To
Playground
Variants
With Icon
States
Card
Playground
Default (content only)
With Header
With Footer
Complete (all sections)
Settings Form
Checkbox
Playground
States
With Label
In Form
Collapsible
Playground
Navigation tree
Show more
Data Grid
Date Picker
Default
States
Dialog
Playground
Default
Confirmation
Custom Trigger
Long Content
Sizes
Without Close Button
Without Title
Scrollable Body
Divider
Playground
Horizontal
Vertical
With Label
Form Field
On the built-in controls
Errors from the model
Your own control
Icon
Playground
All Sizes
Common Icons
Image
Playground
Radii
Sizing
Input
Playground
All Sizes
States
With Labels
Hint and Error
Input Group
Playground
All Addons
Label
Playground
All Sizes
All Weights
States
Link
Playground
Variants
Sizes
With Icons
Menu
Playground
Variants
Positions
Native Select
Playground
Sizes
States
Pagination
Playground
States
Password Input
Playground
States
Popover
Playground
Default
Positions
With Close Button
With Rich Content
Without Title
Radio Group
Playground
Default
With Required
Disabled
Select
Playground
Default
States
Sizes
Searchable
Multiple
Sheet
Playground
Right
Left
Top
Bottom
Sidebar
Default
With Groups
With Dropdown Header
Collapsible
Spinner
Playground
All Sizes
In Buttons
Switch
Playground
Default
Sizes
States
Table
Customers
Empty
With Caption And Selection
Table Of Contents
Nested sections
Flat
Tabs
Playground
Default (Line)
Pill Variant
With Icons
Settings Form
Text
Playground
Sizes
Weights
Tones
Textarea
Playground
Default
Grows with its text
States
All Sizes
Theme Toggle
Playground
In A Header
Palette
Tooltip
Playground
Default
Positions
With Button
With Icon
Typography
Headings
Text styles
Code and quotes
An article
No matching results.
VelvetKit
Select a preview from the nav to get started.