Base123

components/

Components

Around sixty components, all plain Go functions returning h.Node -- from layout primitives to whole page templates. 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 match for “”
Try the framework's short name.

With Default Value

Go
Rust
Python
TypeScript
No match for “”
Languages are listed by their English name.

With Clear Button

Red
Green
Blue
Purple
No match for “”
Try a basic colour name.

With Groups

North America
Eastern (EST)
Central (CST)
Pacific (PST)
Europe
London (GMT)
Paris (CET)
Helsinki (EET)
No match for “”
Search by city or zone, like London or EST.

With Disabled Items

Free
Pro
Enterprise (Coming Soon)
No match for “”
Plans are Free, Pro and Enterprise.

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

October 2026

With Selected Date

March 2026

With Form Name

March 2026

With Min/Max Constraints

October 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

Row Menu

row-menu.go

A context menu whose trigger is the whole row: right-click with a mouse, press and hold with a finger. The phone list keeps one tap target per row.

Quarterly report
Meeting notes

Command

command.go

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

No match for “”
Commands match by name, not description.
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile⌘P
Billing⌘B
Settings⌘S

Press ⌘K to open the command palette.

No match for “”
Commands match by name, not description.
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

Layout

Stack

layout.go
One gap between siblings
The column owns the spacing
Children carry no margins

Cluster

layout.go
DesignGoHypermediaSQLiteWraps when it must

Switcher

layout.go
One row
while it fits
then all stack

Below 24rem of container every item stacks at once -- never two over one.

Grid

layout.go
1
2
3
4
5
6

SidebarLayout

layout.go
Side: a 12rem basis
Main: takes the rest, and keeps at least half the row -- below that, both wrap into a column with no media query.

Center

layout.go

Capped at the measure (60ch) and centred. Every Layout's axiom: a line of reading text should stay near sixty characters, whatever the screen, because a longer one loses the eye on the way back to the next line.

Page templates

page.go

PageHeader, Stat and four screen shapes assembled from the primitives above. Each opens as a whole page.

ListA collection to search, filter and sort: ResultsHeader, FilterBar, a Table, Pagination -- and a NoResults when nothing matches.DetailOne record: its content in the main column, its facts in a side column that drops below it on a phone.SettingsSections of fields, each labelled on its left, with an in-page index that needs no script.DashboardA row of Stats over a grid of panels, both filling as many columns as fit.

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 switch keys off id="dark-toggle", so a page renders exactly one -- which is why this card describes it instead of showing a second copy.

ThemeChoice

The settings-page form: System stores nothing and follows the OS live. Every control paints from the same stored value, so this and the bar's switch move together.

Sound Settings

sound-settings.go

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

100%

Installed App

pwa.go

Installed to a home screen the app has no browser chrome, so it brings its own: StandaloneReload is a menu row that only appears there (the AppShell account menu carries it), and a swipe in from the left edge goes back.

Why it is invisible here

base.js marks html[data-standalone] before first paint when the display mode is standalone. In a browser tab the chrome already has both controls, so neither is drawn.

Nav Skeleton

nav-skeleton.go

A page change changes the screen on the press: the destination's template -- the real page's classes with Skeleton blocks where the words go -- is cloned into #main-content, and the answer replaces it by id. Routes without a template navigate as they always did.

See it

Open the AppShell demo and press a conversation: the chat skeleton paints before the answer lands. Pass templates through AppShellProps.Skeletons.

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.