Hello, Hono!

Button Component Examples

Loading Buttons

Link Component Examples

Variants

Underline (Blue)Plain (Green)Underline (Red)

Color Palettes

BlueGreenRedOrangeAmberPurpleCyanSlate

External Link (target="_blank" gets rel="noopener noreferrer")

Hono (opens in new tab)

Heading Component Examples

Heading 6xl

Heading 4xl

Heading 2xl

Heading xl

Heading md

Heading sm

Heading xs

Avatar Component Examples

JD
JD
User
X
S
M
L
X
2
S
R
F
S
S
O
S

Code Component Examples

Code Sizes

console.log("sm")console.log("md")console.log("lg")console.log("xl")

Code Variants

solidsubtlesurfaceoutlineplain

Code Colors

blue solidgreen subtlered surfaceorange outline

Badge Component Examples

Semantic Colors

Error
Success
Warning
Info

All Color Palettes

Red
Orange
Amber
Green
Blue
Cyan
Purple
Slate

Variants (Blue)

Solid
Subtle
Outline
Surface

Sizes

Small
Medium
Large

Switch Component Examples

Sizes

States

Interactive

Checkbox Component Examples

Sizes

States

Interactive

Spinner Component Examples

Text Component Examples

Text 7xl

Text 4xl

Text 2xl

Text lg

Text md

Text sm

Text xs

Alert Component Examples

Dialog Component Examples

Drawer Component Examples

Menu Component Examples (Flattened API)

Basic Menu with Items (Interactive)

Menu with Disabled Items (Interactive)

Menu with Radio Group (Interactive)

Slider Component Examples

Basic Slider50%
Range Slider20, 80
Slider with Marks
0
1
2
3
4
Vertical70
Range30, 70

Popover Component Examples

HoverCard Component Examples

Combobox Component Examples

Select Component Examples

React
Solid
Svelte
Vue
Hono
React
Solid
Svelte
Vue
Hono
React
Solid
Hono
React
Solid
Svelte
Vue
Hono
React
Solid
Svelte
Vue
Hono

Group Component Examples

Attached Group

Grow Group

Vertical Group

Stack Component Examples

Horizontal Stack (Default)

Vertical Stack

Stack with Spacing and Alignment

Item 1

Item 2

Item 3

Responsive Stack (collapses to a vertical stack on mobile)

Item 1

Item 2

Item 3

Grid Component Examples

Basic 3-Column Grid Layout

Item 1
Item 2
Item 3

Responsive Grid (1 Column on Base, 3 Columns on MD+)

Card A
Card B
Card C

Grid Layout with Auto-fitting (minChildWidth="200px")

Column 1
Column 2
Column 3

AbsoluteCenter Component Examples

Centered Content

Field Component Examples

Please enter a valid email address containing @
Minimum 5 characters
Must be at least 5 characters

Skeleton Component Examples

Basic Skeleton

Skeleton Circle

Skeleton Text

Skeleton with Children (Loading: true)

Skeleton with Children (Loading: false)

Breadcrumb Component Examples

Basic Breadcrumb (Flattened API)

Underline Variant

Custom Separator

Custom Separator as JSX

Custom Separator (Slash)

Card Component Examples

Team Members

Add new members to your organization.

Invite your colleagues to collaborate.

JD

John Doe

Software Engineer

Specialises in building high-performance web applications with Hono and React.

Mountain Retreat

A peaceful getaway in the heart of nature.

Experience the beauty of the mountains from our cozy cabin.

Interactive Card

Click this card to see it in action.

This card is interactive and handles click events via the island.

Fieldset Component Examples

Shipping Information

Please enter your delivery details.

Account Settings

Please fix the errors in this section.

Textarea Component Examples

Textarea (with `validator`)

Minimum 10 characters required.
Minimum 10 characters required.

Disabled

Toast Component Examples

Tooltip Component Examples

Table Component Examples (Flattened API)

Basic Table with Caption and Footer

Product Inventory
NameCategoryPrice
LaptopElectronics$999.00
Coffee MugHome & Kitchen$15.00
Ergonomic ChairFurniture$250.00
Total$1,264.00

Surface Variant with Striped Rows and Custom Cell Rendering

MemberRoleStatus
Alice JohnsonDesigner
Active
Bob SmithDeveloper
Away
Charlie BrownManager
Offline

Interactive Table with Row Click Handlers

ProjectOwnerActions
Project AlphaAlice
Project BetaBob

DatePicker Component Examples

Basic DatePicker (Single selection)

Range Selection DatePicker

Progress Component Examples

Default Progress
40%
Subtle Progress
60%
Indeterminate Progress
Circular ProgressProgress75%
Progress
Progress

Loader Component Examples

Loading...
Processing
Custom Spinner

RadioGroup Component Examples

Basic RadioGroup (Interactive)

RadioGroup with Disabled Items

Sizes

SegmentGroup Component Examples

Basic SegmentGroup (Interactive)

Vertical SegmentGroup

Fitted SegmentGroup

ToggleGroup Component Examples

Basic ToggleGroup (Single Selection)

Multiple Selection

Tabs Component Examples

Basic Tabs (Interactive)

React Content

Subtle Variant

React Content

Enclosed Variant

React Content

Splitter Component Examples

Horizontal Splitter (Static)

Left Panel
Right Panel

Vertical Splitter (Interactive)

Top Panel
Bottom Panel

Three Panels (Interactive)

Panel 1
Panel 2
Panel 3

Collapsible Component Examples

Basic Collapsible (String trigger)

This content is collapsed by default.

With Indicator (Button trigger)

This collapsible uses a custom indicator that rotates when open.

Default Open & Start Indicator

Advanced configuration options go here.

TagsInput Component Examples

Basic TagsInput (Static)

React
Solid
Vue

Interactive TagsInput

Hono
HonoX

Pagination Component Examples

Basic Pagination (Uncontrolled)

Interactive Pagination with Paginated Table

IDNameEmailRoleStatus
1Alice Johnsonalice@example.comDeveloper
Active
2Bob Smithbob@example.comDesigner
Away
3Charlie Browncharlie@example.comManager
Offline
4Diana Princediana@example.comQA Engineer
Active
5Evan Wrightevan@example.comDeveloper
Active