Ready to publish
Everyday tools / VUI
VUI
Interactive UI components, examples and themes.
Good interfaces start here.✳
A collection of ready-made components. Explore the details, try a live example, and make it your own.
20 ready-made components Two thoughtfully crafted themes
Component collection
20 / 2002Live example
Input
Collect a short value. Example: a project name.
03Live example
Textarea
Collect longer text. Example: feedback.
04Live example
Select
Choose one option. Example: a project category.
05Live example
Checkbox
Enable an independent option. Example: email updates.
06Live example
Radio
Choose one of several options. Example: a billing period.
07Live example
Switch
Toggle a setting. Example: notifications.
08Live example
Slider
Adjust a numeric value. Example: volume.
09Live example
Badge
Show a concise status. Example: a published project.
Published
10Live example
Avatar
Represent a person. Example: a team member.
VK
11Live example
Card
Group related content. Example: a project summary.
12Live example
Alert
Explain a status. Example: a successful save.
✓ Changes saved successfully.
13Live example
Progress
Show task completion. Example: a file upload.
14Live example
Tabs
Switch between related views. Example: preview and details.
Your project preview appears here.
15Live example
Accordion
Reveal optional details. Example: a FAQ answer.
How does VUI work?
Choose a theme and try the components directly in your browser.
16Live example
Dialog
Focus on a secondary task. Example: confirm a choice.
17Live example
Tooltip
Explain a control. Example: keyboard help.
Tip: use Tab to navigate.
18Live example
Table
Compare structured data. Example: recent projects.
| Project | Status |
|---|---|
| VUI | Published |
19Live example
Skeleton
Indicate loading content. Example: an incoming card.
Loading content
20Live example
Toast
Confirm an action briefly. Example: a saved preference.