Veloria UI
Interactive Playground

Component Playground

Every Veloria UI component, live and interactive. Explore, interact, and see them in real UI patterns.

Button

6 variants, 5 sizes, loading state, icon slots.

Badge

5 colors × 4 variants with optional dot indicator.

solidPrimarySuccessWarningDangerNeutral
outlinePrimarySuccessWarningDangerNeutral
softPrimarySuccessWarningDangerNeutral
flatPrimarySuccessWarningDangerNeutral

Avatar

Image with fallback, status ring, 6 sizes, group stacking.

avatar
xs
avatar
sm
avatar
md
avatar
lg
avatar
xl
avatar
2xl
avatar
online
avatar
busy
avatar
away
avatar
offline
user
user
user
user
+8

Tag & Chip

Closable tags and toggleable chips.

ReactTypeScriptTailwind CSSNext.jsVeloria UI

Divider

Horizontal separator with optional center label.

OR CONTINUE WITH
Section A

Tooltip

Hover to reveal contextual info on all four sides.

Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left