Base123

components/

Components

Around fifty components, all plain Go functions returning h.Node. Every one of them is on this page, interactive, in whichever theme you have on.

Buttons

Variants

button.go

Sizes

button.go

Icon Sizes

button.go

States

button.go

Decorative

button.go

Icon Only

With Icon

Rounded

Loader

Forms

Input

input.go

Textarea

textarea.go

Checkbox

checkbox.go

Radio Group

radio-group.go

Default

With Default Selected

Disabled

Invalid

Switch

switch.go

Select

select.go

Basic

Apple
Banana
Cherry
Grape
Orange

With Default Value

Red
Green
Blue
Purple

With Groups

North America
Eastern (EST)
Central (CST)
Pacific (PST)
Europe
London (GMT)
Paris (CET)
Helsinki (EET)

Small Size

Low
Medium
High

With Disabled Items

Free
Pro
Enterprise (Coming Soon)

Disabled

Read Only

Align End

Left
Center
Right

Native Select

native-select.go

Default

Small

With OptGroup

Disabled

Invalid

Combobox

combobox.go

Basic

Next.js
Remix
Astro
Nuxt
SvelteKit
No framework found.

With Default Value

Go
Rust
Python
TypeScript
No language found.

With Clear Button

Red
Green
Blue
Purple
No color found.

With Groups

North America
Eastern (EST)
Central (CST)
Pacific (PST)
Europe
London (GMT)
Paris (CET)
Helsinki (EET)
No timezone found.

With Disabled Items

Free
Pro
Enterprise (Coming Soon)
No plan found.

Disabled

Go

Slider

slider.go

Default

Custom Range (0-200, step 10)

Empty (0%)

Full (100%)

Disabled

Input Group

input-group.go

With Icon (inline-start)

With Icon (inline-end)

With Text Prefix

https://

With Text Suffix

USD

Both Sides

.00

With Button

With Button (icon-xs)

With Textarea

Disabled

Invalid

Calendar

calendar.go

Default

August 2026

With Selected Date

March 2026

With Form Name

March 2026

With Min/Max Constraints

August 2026

Date Picker

date-picker.go

Basic

With Selected Date

With Form Name

With Min/Max

With Label

Date + Time

Time Picker

time-picker.go

24-Hour (Default)

24-Hour with Value

12-Hour (AM/PM)

12-Hour with Value

With Form Name

With Label

With Seconds (24h)

With Seconds (12h)

Label

label.go

Field

field.go

Vertical (Default)

Your full name as it appears on documents.

With Error

Horizontal with Switch

Horizontal with Checkbox + Content

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

Disabled

FieldSet & FieldGroup

field.go
Personal Information

Fill in your personal details below.

FieldSeparator

field.go
or

FieldLegend Variants

field.go

Legend (Default)

Account Settings

Manage your account preferences.

Label Variant

Notification Preferences

Choose how you want to be notified.

Overlays

Dialog

dialog.go

Basic Dialog

This is a basic dialog with a title and description.

Dialog content goes here.

Save Changes

Are you sure you want to save these changes?

Edit Profile

Make changes to your profile here. Click save when you're done.

Confirmation

This dialog has no close X button, only footer actions.

Drawer

drawer.go

Directions

With Form

No Close Button

Bottom Drawer

This drawer slides up from the bottom of the screen.

Drawer content goes here.

Top Drawer

This drawer slides down from the top of the screen.

Drawer content goes here.

Left Drawer

This drawer slides in from the left edge.

Navigation or sidebar content goes here.

Right Drawer

This drawer slides in from the right edge.

Settings or detail panel content goes here.

Edit Profile

Make changes to your profile here.

Confirmation

This drawer has no close button, only footer actions.

Popover

popover.go

Default (bottom center)

Top

Left

Right

Align End

With Form Content

Tooltip

tooltip.go

Sides

With Icon Button

Variants

Dropdown Menu

menu.go

Basic

With Checkbox Items

With Radio Items

With Submenu

With Disabled & Groups

Align End

Context Menu

menu.go
Right click here

Command

command.go

Inline command palette and dialog variant (Cmd+K / Ctrl+K).

No results found.
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile⌘P
Billing⌘B
Settings⌘S

Press ⌘K to open the command palette.

No results found.
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile⌘P
Billing⌘B
Settings⌘S

Carousel

carousel.go

Default (Horizontal)

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

With Dots

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

With Counter

Slide 1
Slide 2
Slide 3
Slide 4

Vertical

Slide 1
Slide 2
Slide 3

With Cards

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

Multiple Items (3 per view)

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

Feedback

Alert

alert.go

Default

Destructive

With Icon

Destructive with Icon

With Action

Toast

toast.go

Types

With Title

Persistent

Loading

Progress

progress.go

Default

With Label & Value

Loading...45%

Empty (0%)

Not started0%

Complete (100%)

Complete100%

Partial

Uploading...25%

Indeterminate

Processing...

Indeterminate (bare)

Loader

loader.go

Skeleton

skeleton.go

Default

Circle

Card Placeholder

Charts

chart.go
Bar Chart
Monthly visitors by device
Line Chart
Trend over time
Area Chart
Filled area visualization
Donut Chart
Browser market share

Content

Typography

typography.go

H1

Taxing Laughter: The Joke Tax Chronicles

H2

The People of the Kingdom

H3

The Joke Tax

H4

People stopped telling jokes

Paragraph

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

Blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

Table

King's TreasuryPeople's happiness
EmptyOverflowing
ModestSatisfied
FullEcstatic

List

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins

Inline Code

@radix-ui/react-alert-dialog

Lead

A modal dialog that interrupts the user with important content and expects a response.

Large

Are you absolutely sure?

Small

Email address

Muted

Enter your email address.

Badge

badge.go

Variants

DefaultSecondaryDestructive

With Icon

VerifiedBookmark

Avatar

avatar.go

Sizes

UserUUserUUserU

With Fallback

ARFJD

With Badge

UserUUserUUserU

Group

User 1AUser 2BUser 3C
+3

Group (Small)

XYZ
+5

Group (Large)

User 1AUser 2B
+12

Icon

icon.go

Any Phosphor name, lit by the page's one light source

The whole set, and why closed glyphs are lit while arrows stay flat, is on the Design page.

Kbd

kbd.go

Single Keys

KEnterEscTabSpace

Key Combinations (KbdGroup)

⌘KCtrlShiftP⌘⇧S

Inside Tooltip

Empty

empty.go
No items yet
Get started by creating your first item.
No documents
Upload a document to get started.
No projects
Create a project to organize your work.

Chrome

Dark Mode

dark-mode.go

The toggle is in the bar at the top of this page -- flip it and watch every card here follow, with no second stylesheet and no per-component dark variant.

Why nothing flashes on reload

The choice is written to localStorage and re-applied by the inline script in base.go before first paint, so the page never renders in the wrong theme first.

One instance per page

The control keys off id="dark-toggle", so a page renders exactly one -- which is why this card describes it instead of showing a second copy.

Sound Settings

sound-settings.go

Controls the audio cues every component plays. Stored per browser and honoured by the shared audio utility.

100%

Page Shell

base.go

Base is the whole document: head, both bundles, the icon gradient, the skip link, and the footer. Every full page render goes through it; a fragment render never does.

What it inlines rather than fetches

  • base.csstokens and resets, inline in <head> so the first paint has them
  • base.jstheme pre-paint, the sound palette, _uiOnInit -- inline, nonce-carrying
  • IconDefs()the one gradient every lit icon reaches for, once per document

Error Page

error.go

One component answers 404 and 500 alike: a status, a human sentence, and a way back. The panic recovery middleware renders it too, which is why it takes props rather than reading a request.