Component Showcase
Buttons
Variants & Sizes
primary
secondary
destructive
outlined
plain
Icon Buttons
primary
secondary
outlined
plain
States (Disabled & Loading)
Disabled
Loading
Inputs & Fields
TextField States
Please enter a valid email address.
Provide your username.
SearchField & NumberField
Selection Controls
Checkbox & CheckboxGroup
Checkbox GroupPlease select at least one option.
RadioGroup
Favorite Pet
Shipping Method
Notification TypePush notifications are required.
Switch
Select
Basic Select
Disabled Select
Invalid SelectSelection is required.
Data Display
Alert Variants
Informational Tip
You can customize your profile settings.
Success!
Your changes have been saved successfully.
Warning
Your session is about to expire.
Error
Failed to load data. Please try again.
Info Alert
Just a description, no title or icon.
Badge Variants
FilledPlainDestructiveOutlined
Avatar Sizes & Fallback
VK
TagGroup
Selectable Tags
React
Vue
Angular
Svelte (Disabled)
Removable Tags (Functionality TBD)
Bug
Feature Request
Documentation
Feedback & Overlays
Tooltip
Dialog
Popover
Progress & Meter
Progress Bar (30%)30%
Progress Bar (75%)75% Complete
Indeterminate Progress
Storage Used20%
Task Completion60%
Warning Level85%
Critical Usage95%
Navigation & Structure
Accordion
Tabs
Profile
Dashboard
Settings (Disabled)
Billing
Profile content goes here.
Date & Time
Calendars
Date/Time Pickers & Fields
Event Date
ddmmyyyy
Booking Duration
ddmmyyyy
ddmmyyyy
Date of Birth
ddmmyyyy
Appointment Time
930am
Disabled Date
ddmmyyyy
Readonly Time
200pm
Miscellaneous
Slider
Toggle Buttons
ColorArea
ColorWheel
ColorSwatch
ColorSwatchPicker