Component & Icon Showcase
Sidebar
The sidebar's height is `calc(100% - 24px)` of its container, so each box below sizes it to fit fully (header, body, and footer all visible) rather than the full viewport.
Bundy
Workspace
Navbar
Buttons
Links
Avatars
Avatar Groups
Users
Badges
Cards
Alert
neutral
This is an alert description explaining the current state.
primary
This is an alert description explaining the current state.
secondary
This is an alert description explaining the current state.
success
This is an alert description explaining the current state.
error
This is an alert description explaining the current state.
warning
This is an alert description explaining the current state.
info
This is an alert description explaining the current state.
pending
This is an alert description explaining the current state.
Without icon
Alerts work fine without an icon too.
Title only
Description only, no title.
Slot content
Custom rich content passed via the default slot.
File Upload
Drop your file here
or click to browse
Drop your files here
or click to browse
Drop images here
PNG, JPG up to 10MB
Drop your file here
Tags Input
Outline (default)
Soft
Colors
Max tags
Disabled
Number Input
Basic
Variants
Orientation
Min / max / step
Decimal step
Disabled
With FormField
Switch
Basic
Colors
Indicator
States
Required
Tabs
Variants
Manage your account settings and preferences here.
Manage your account settings and preferences here.
Manage your account settings and preferences here.
Sizes
Orientation
With content
Manage your account settings and preferences here.
Disabled tab
Without icons
Kbd
Checkbox
Basic
Colors
States
Indicator
Required
Card variant
Radio Group
Basic
Colors
Orientation
Indicator
States
Required
Card variant
Tooltip
Basic
Sides
With keyboard shortcut
Without arrow
Disabled
Tags
Soft (default)
Solid
With icons
Form Field & Input
Outline (default)
We'll never share your email.
Soft
Username is already taken.
Disabled
With icons
Textarea
Outline (default)
Soft
Disabled
Rows
Autoresize
Autoresize with max rows
With icon
Resizable
With FormField
Feedback is required.
Select
Basic
Variants
With icon
Multiple
Disabled
With FormField
Grouped
With divider
Clearable
Combobox
Basic
Variants
With icon
Multiple (removable tags)
Multiple with icons
Disabled
With FormField
Grouped
With divider
Clearable
Autocomplete
Basic (type to filter)
Variants
With icon
Multiple (removable tags)
Disabled
With FormField
Grouped
Clearable
Date Input
Basic
Variants
Min / Max (this month only)
Disabled
With FormField
Clearable
Range
Time Input
Basic
Variants
Format
Minute step (15 min)
Disabled
With FormField
Clearable
Range
Command Palette
Basic — click to open, or press ⌘K / Ctrl+K
Last selected
Nothing selected yet
Collapsed
Post Navigation
Basic — previous and next page
First page — no previous link
Last page — no next link
Pin Input
Basic (empty)
Variants
Length
Number only
Masked
Disabled
With FormField
Last completed value
Not completed yet
Phone Input
Basic
Variants
Without the country picker
Disabled
Selected value
+1 empty
Pagination
Basic (1 / 12)
Sibling count
Without edges
Without controls
Few pages (no dots needed)
Disabled
Modal
Slideover
Drawer
Drag the handle to dismiss.
Slider
Basic (50)
Range (25 – 75)
Variants
Colors
Min / max / step
4 (0–10, step 2)
With tooltip (drag the thumb)
Disabled
With FormField
Popover
Info
Toast
Floating Action Buttons
Drag the pill by its grip (or any empty space in it) towards an edge of the box below — it snaps to whichever edge is nearest and switches between a horizontal and vertical layout as you cross between edges.
Bounded container — every FAB below stays confined to this box, not the full viewport
The top-anchored pill above has no handle and isn't draggable; the others can be dragged by their grip, empty space, or even their own buttons.
Toolbar
Grouped items
Vertical
Slot content mixed with items
Stepper
Horizontal — click a step to navigate
Account
Create an account
Profile
Set up our profile
Complete
Complete the setup
Vertical
Intro
Get to know the basics
Basics
Advanced
Deep dive into advanced topics
Practice
Certification
Get your certificate
Non-linear (any step is clickable) + icons
Cart
Review your items
Shipping
Delivery details
Payment
Add payment method
Done
Order confirmed
Disabled step
Account
Create an account
Verify
Confirm your email
Profile
Set up our profile
Complete
Complete the setup
Line variant — a divided progress line, no circular trigger
Line variant — vertical
Line variant — with icons
Line variant — colors
Tree
Basic — single selection
Selected: none
Multiple selection
Selected: none
Controlled expansion
Disabled
Colors
Navigation
Color
Scroll Spy
Scroll the box below — the active link tracks via CSS `scroll-target-group`/`:target-current` (Chromium 133+), no JS scroll-spy.
Introduction
Placeholder content for "Introduction" — scroll to see the matching link on the left highlight automatically.
Installation
Placeholder content for "Installation" — scroll to see the matching link on the left highlight automatically.
Usage
Placeholder content for "Usage" — scroll to see the matching link on the left highlight automatically.
Basic usage
Placeholder content for "Basic usage" — scroll to see the matching link on the left highlight automatically.
Advanced usage
Placeholder content for "Advanced usage" — scroll to see the matching link on the left highlight automatically.
FAQ
Placeholder content for "FAQ" — scroll to see the matching link on the left highlight automatically.
Table
Loading and empty states
Code
Install the package with npm install bundy-ui, then import components as needed.
<template>
<UiButton>Click me</UiButton>
</template>{
"id": 1,
"name": "Example Item",
"description": "This is a sample JSON structure",
"active": true,
"tags": ["sample", "json", "example"],
"createdAt": "2026-01-16T12:00:00Z"
}npm install bundy-uiDivider
Horizontal
Vertical
Color Picker
Basic
Disabled
Progress
Basic
Colors
Outline variant
Large variant
Indeterminate
Buffering
Buffer
Circle variant
Circle-outline variant
Circle-lg variant
Circle-lg-outline variant
Circle buffering
Context Menu
Basic
Grouped items
With colors
Checkbox items
Disabled
With submenu
Dropdown Menu
Basic
Grouped items
With colors
Checkbox items
With submenu
Disabled
Controlled open state
Skeleton
Basic
Different tags
Card preview