Veloria UI
128 components & hooks

Component Library

Every Veloria UI component and hook — click any card to open its full documentation with live examples, code snippets, and API reference.

Quick examples

Live previews and copy-ready code for the most common components.

Button
Basic & Layout(20)Navigation(10)Forms & Inputs(24)Data Display(15)Feedback & Status(14)Overlay & Discovery(15)Media(5)Utility & Performance(7)Hooks(18)

Basic & Layout

20 items

Core building blocks and structural layout components.

Button

6 variants, 5 sizes, loading, icon slots.

IconButton

Square or circle icon-only button.

Link

Anchor with external link detection.

Badge

Status labels, 5 colors, 4 variants.

Avatar

Image, fallback initials, status ring.

AvatarGroup

Stacked avatars with overflow count.

Divider

Horizontal/vertical separator.

Tag

Closable colored tag.

Chip

Toggleable chip with avatar/icon.

Tooltip

Radix hover overlay, all four sides.

Container

Max-width wrapper with padding.

Stack

Flex col/row with gap and dividers.

Grid

CSS Grid with column/row control.

Flex

Flexbox with directional shorthands.

Section

Semantic section with padding presets.

Spacer

Invisible flexible spacer.

AspectRatio

Radix aspect-ratio container.

Center

Centers children on both axes.

ScrollArea

Custom scrollbar via Radix.

Masonry

CSS multi-column masonry grid.

Forms & Inputs

24 items

All input primitives and advanced form controls.

Input

Icon slots, sizes, error state.

TextArea

Multi-line with resize and char count.

Select

Radix Select with grouped options.

Checkbox

With label, description, indeterminate.

RadioGroup

Radix RadioGroup with descriptions.

Switch

Boolean toggle, 3 sizes.

Slider

Single thumb range slider.

RangeSlider

Dual thumb min/max slider.

DatePicker

Native date input with label.

TimePicker

Time input with label.

FileUpload

Drag-and-drop zone.

OTPInput

PIN input with auto-advance.

ColorPicker

Hex input with swatches.

SearchInput

Search with clear and debounce.

PasswordInput

Show/hide toggle + strength bar.

Combobox

Searchable single-value select.

MultiSelect

Multi-value with chip display.

FormField

Label + input + error wrapper.

FormLabel

Required, optional, disabled.

FormError

role=alert error message.

PhoneInput

International dial code selector.

TagInput

Type-and-Enter tag input.

CurrencyInput

Locale-aware currency symbol.

RatingInput

Star picker with hover preview.

Data Display

15 items

Components for presenting information and data structures.

Card

Header, body, footer. 5 variants.

List

Simple, bordered, divided.

ListItem

Icon, label, action slot.

DataTable

Sortable, loading, empty states.

Statistic

Metric with prefix, suffix, trend.

Timeline

Vertical events with icon nodes.

Calendar

Month picker with highlights.

Chart

Responsive container for charts.

CodeBlock

Syntax highlight with copy button.

StatsCard

Metric card with icon and trend.

TreeView

Expandable file tree with keyboard nav.

JsonViewer

Collapsible JSON tree viewer.

Heatmap

GitHub-style activity grid.

KanbanBoard

Drag-and-drop columns.

Pagination

Page numbers with ellipsis.

Feedback & Status

14 items

Inform users about the state of their actions.

Progress

Linear progress bar.

CircularProgress

SVG ring indicator.

Skeleton

Loading placeholder shapes.

LoadingSpinner

Accessible SVG spinner.

StatusIndicator

Colored dot with label.

Alert

Inline notification banners.

Toast

Non-blocking messages.

Snackbar

Positioned message bar.

EmptyState

No-data placeholder.

Notification

Notification list item.

BannerAlert

Full-width announcement.

ConfirmDialog

Async confirm with danger.

FloatingActionButton

Fixed-position speed dial.

Tour

Multi-step onboarding.

Overlay & Discovery

15 items

Floating layers, dialogs, and discovery patterns.

Modal

Centered dialog, 4 sizes.

Dialog

Radix Dialog primitives.

Drawer

Slides from any edge.

Sheet

Slide-in sheet panel.

Popover

Floating anchored panel.

HoverCard

Rich hover preview card.

ContextMenu

Right-click Radix menu.

CommandDialog

⌘K command palette.

Lightbox

Full-screen image overlay.

ImageViewer

Image with fallback/caption.

ConfirmDialog

Async confirmation dialog.

FloatingActionButton

Fixed FAB with speed dial.

RichTooltip

Tooltip with title, desc, action.

Tour

Onboarding step overlay.

NavigationMenu

Mega-menu nav panels.

Media

5 items

Image, video, and audio display components.

Image

Skeleton, fallback, aspect ratio.

VideoPlayer

Custom controls, poster, subtitles.

AudioPlayer

Seek bar, volume, cover art.

Carousel

Arrows, dots, autoplay, loop.

Gallery

Responsive grid with lightbox.

Utility & Performance

7 items

Helpers, tools, and performance optimization wrappers.

ThemeSwitcher

Light, dark, system toggle.

CopyButton

Copy to clipboard + feedback.

KeyboardShortcut

Styled kbd key display.

ResizablePanel

Drag-to-resize panel.

DragDropArea

Accessible drop zone.

InfiniteScroll

On-scroll load-more trigger.

VirtualList

Windowed list for large data.

Hooks

18 items

Reusable stateful logic for common UI patterns.

useDisclosure

Open/close state for modals.

useMounted

SSR-safe mount check.

useTheme

Theme switching with persistence.

useToast

Programmatic toast trigger.

useStep

Multi-step wizard state.

useForm

Form state and validation.

usePagination

Headless pagination logic.

useOnClickOutside

Click-outside detection.

useKeydown

Keyboard shortcut listener.

useClipboard

Copy with success state.

useDebounce

Debounced value updates.

useIntersection

IntersectionObserver wrapper.

useCountdown

Timer with start/pause/reset.

useMediaQuery

CSS media query subscriber.

useBreakpoint

Tailwind breakpoint helper.

useWindowSize

Reactive window dimensions.

useLocalStorage

State synced to localStorage.