Components

Vacano UI provides 50+ production-ready components organized by category.

Interactive Playground

Explore all components interactively in our Storybook.

Icons

1800+ Lucide icons as React components with tree-shaking support.

import { Search, User, Plus, Check, X } from '@vacano/ui/icons'

Browse all icons

Form

Components for user input and form controls.

Component	Description
Autocomplete	Async search input with suggestions (typeahead, combobox)
Button	Clickable button with variants, icons, keyboard bindings, and loading state
Checkbox	Checkbox input with label and indeterminate state
CheckboxCard	Card-style checkbox with description
CheckboxGroup	Group of checkboxes with shared state
DatePicker	Date, month, or year selection with calendar dropdown
FileUpload	Drag-and-drop file upload with progress tracking
Input	Single-line text input with label and validation
MultiSelect	Multiple selection with modal picker
OtpCode	OTP/PIN verification code input (SMS, 2FA)
Radio	Radio button input
RadioCard	Card-style radio button with description
RadioGroup	Group of radio buttons
Select	Single selection dropdown
Tags	Tag input with autocomplete and free-form support
Textarea	Multiline text input with label and validation
Toggle	Toggle switch for binary on/off settings
ToggleCard	Card-style toggle with description
ToggleGroup	Group of toggles with shared state

Data Display

Components for displaying information.

Component	Description
Avatar	User avatar with image, initials fallback, icon, and status indicator
AvatarGroup	Group of overlapping avatars with max count
Badge	Status indicator dot or counter on any element
Card	Container with header, body, footer, shadow, and border
Chip	Small label/tag with optional icon and delete action
DateRange	Display a date range (from–to) with optional "Present" label
Hashtag	Hashtag display with optional link
Heading	Semantic heading (h1–h6) with visual level override
Overline	Small uppercase label with optional description
Progress	Progress bar indicator (0–100%)
Skeleton	Loading placeholder with pulse or wave animation
Stat	Statistic display with value and label
StepLog	CI/CD-style step log with status, duration, and expandable output
Tabs	Tab navigation for switching views
Timeline	Vertical timeline for chronological events
User	User display with avatar, name, and description

Feedback

Components for user notifications, confirmations, and loading states.

Component	Description
Alert	Inline alert block with icon, title, description, and variant colors
Confirmation	Yes/no confirmation dialog for destructive actions
Drawer	Slide-out side panel (left, right, top, bottom)
EmptyState	Empty view with icon, title, description, and actions
Modal	Overlay dialog for forms and content
Notification	Top-of-screen notification bar (one at a time, queued)
NotifyConfirmation	Slide-in confirmation with confirm/discard actions
SaveProgress	Background save/upload indicator (bottom-right)
Spinner	Loading/activity indicator
Toastr	Toast notifications (multiple, bottom-left)
Tooltip	Hover tooltip with placement and variants

Layout

Components for page structure.

Component	Description
Container	Responsive centered container with max-width
Divider	Visual separator with optional label
Panel	Titled content section with description
ShellScreen	Full-screen layout with grid background for auth, error, and status pages

Navigation

Components for navigation and flow.

Component	Description
Accordion	Expandable content sections with outlined or splitted variants
Breadcrumbs	Navigation breadcrumb trail with collapsing support
Dropdown	Popup menu triggered by any element
MenuButton	Animated hamburger menu button (toggles to X)
Pagination	Page navigation with variants and controls
Stepper	Step indicator for multi-step wizards

Form Wrappers (react-hook-form)

17 Form* components for react-hook-form integration. Each wrapper binds a Vacano UI component to a form field, automatically handling value binding, validation errors, and error display.

Wrapper	Base Component
FormInput	Input
FormTextarea	Textarea
FormSelect	Select
FormAutocomplete	Autocomplete
FormDatePicker	DatePicker
FormMultiSelect	MultiSelect
FormOtpCode	OtpCode
FormTags	Tags
FormCheckbox	Checkbox
FormCheckboxCard	CheckboxCard
FormCheckboxGroup	CheckboxGroup
FormRadio	Radio
FormRadioCard	RadioCard
FormRadioGroup	RadioGroup
FormToggle	Toggle
FormToggleCard	ToggleCard
FormToggleGroup	ToggleGroup

Full documentation and examples

Utility

Helper components for forms, keyboard shortcuts, and styling.

Component	Description
FieldLabel	Form field label with required indicator
FieldMessage	Validation message, hint, or error below form fields
FieldRow	Grid container for horizontal field alignment (CSS Subgrid)
GlobalStyle	Global CSS reset and base styles (required)
ImageCropper	Image upload and cropping (avatars, profile pictures)
KeysBindings	Keyboard shortcut display (e.g. Cmd+S)
KeySymbol	Single key symbol display

---

Choosing the Right Component

Text Input

Need	Component
Single-line text	Input
Multiline text	Textarea
Search with API suggestions	Autocomplete
OTP / verification code	OtpCode
File selection	FileUpload

Selection

Need	Component
One option from a list	Select
Multiple options from a list	MultiSelect
Tags / keywords with autocomplete	Tags
Simple yes/no toggle	Checkbox or Toggle
One from few options (visible)	RadioGroup
Multiple from few options (visible)	CheckboxGroup
Rich option cards (single)	RadioCard
Rich option cards (multiple)	CheckboxCard or ToggleCard
Date / month / year	DatePicker

Data Display

Need	Component
User identity	Avatar or User
Multiple users	AvatarGroup
Status label / tag	Chip or Badge
Key statistic	Stat
Section label	Overline or Heading
Loading placeholder	Skeleton
Completion percentage	Progress
CI/CD pipeline	StepLog
Chronological events	Timeline

Overlays

Need	Component
Form or content overlay	Modal
Side panel for details	Drawer
Simple yes/no confirmation	Confirmation
Custom popup menu	Dropdown
Hover information	Tooltip

Notifications & Loading

Need	Component
Inline alert / message	Alert — inside containers, cards, panels
Brief feedback (success, error)	Toastr — multiple toasts, bottom-left
Prominent single notification	Notification — top bar, queued
Background save indicator	SaveProgress — bottom-right, non-blocking
Loading spinner	Spinner
Completion percentage	Progress
Button loading state	Button — loading prop
Empty content placeholder	EmptyState

Navigation

Need	Component
Page breadcrumbs	Breadcrumbs
Tab switching	Tabs
Multi-step wizard	Stepper
Page pagination	Pagination
Collapsible sections	Accordion
Hamburger menu toggle	MenuButton