Skip to content
Jordi Espinosa
Koala UI ·

Koala UI React

The React implementation of Koala UI: 89 production-ready components built on Tailwind CSS v4 and Radix, with four themes and eight accents driven by a single token.

Role
Design System, Front-End
Stack
ReactTailwindCSSRadix
Year
2026
2,450

Project Details

Koala UI React is the code side of the Koala UI design system: a library of 89 production-ready React components built on Tailwind CSS v4 and Radix, with four themes and eight accents, a density system, and a strict house style. Every component ships feeling finished — and the ones on this page are the real thing, running right here, not screenshots.

  • 89 components, from buttons and forms to charts, data tables and an AI chat thread
  • Four themes (light, dark, moonlight) and eight accents, all driven by a single token
  • A koalaui CLI that copies source into your project — you own and edit the code
  • Built on Radix primitives, so behavior and accessibility come for free
  • A house style enforced across every component: motion tokens, tabular numbers, tactile press

Tech Used

ReactTailwindCSSRadix

Live, not screenshots

The system's numbers roll instead of jumping — the old value lifts up and out while the new one rises from below, on the shared motion tokens. Poke the controls: it never nudges its neighbours, because every figure is set in tabular numbers.

2,450
Tap the controls — the value rolls, it never jumps

One token, the whole system recolors

A design system earns its name when a single knob restyles everything. Here the accent is one custom property: tap a swatch and the button, badge, trend chip and sparkline all recolor at once — the same way data-accent recolors the real kit.

Revenue12.4%
$48,210
Active

Charts, no library underneath

The chart is pure SVG — no charting dependency — yet it draws its own axes, grid, and area, and reveals a crosshair and tooltip on hover. Series colours come from the palette, so it themes with the rest of the system.

monthRevenue
Jan4,200
Feb3,800
Mar5,100
Apr6,200
May5,800
Jun7,400
Hover the chart for the crosshair and tooltip

Suggestions, the way an editor should

The AI marks the spans it would change and tints each underline by category — grammar, clarity, tone. Click one to see the replacement and why. Apply, and the old text lifts up and out while the new one rises into its place, the line reflowing under a soft flash in the category's colour rather than snapping.

4 suggestions to review. Click a highlight to see it.
Our onboarding flow . We it activation, and the .
Click a highlight, then Apply — the text morphs in place

A composer that knows it's talking to a model

The prompt input is a toolbar, a textarea and a submit button that swaps to a stop control while the answer streams. Attachments, model and tools each hang off their own menu, and the character count keeps its place because it's set in tabular numbers.

Type and send — the button becomes a stop control while it streams

A carousel you can throw

Drag it, flick it, or use the arrow keys. The slides snap, the arrows wrap around the ends so neither ever goes dead, and the indicators track position without stealing focus.

A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
Drag, flick, or use the arrow keys

The same carousel, seven ways to show position: pill-morphing dots, thin lines, a rolling 2 / 5 fraction, slide thumbnails, text tabs with a gliding underline, numbered chips, and a continuous progress bar. Position is a prop — overlay and align compose with every one.

dots
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
lines
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
fraction
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
thumbnails
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
tabs
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
numbers
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
progress
A-frame cabin lit at dusk beside a firepit and Adirondack chairs
Modern black cabin in an autumn forest with a glowing firepit
Two dark timber cabins with a lit deck at dusk
Black A-frame cabin against a pink dusk sky
One carousel, seven indicator variants — click, drag, or use the arrow keys

Alerts that carry their own icon

The variant picks the tone, the icon and the accessible role in one prop. Dismiss one and the stack closes the gap instead of jumping.

Dismiss them, then reset

Right-click, like a desktop app

Radix under the hood, so submenus, checkboxes, radio groups and keyboard shortcuts all behave the way the operating system taught you to expect.

Q3 Marketing Plan
Edited 2 hours ago · 14 files

Right-click to open the menu

Right-click the card

A sidebar with the whole shell attached

Collapsible groups, a workspace switcher, nested items, badges and a keyboard hint — all reading the density token, so the same markup serves a marketing site and a dense admin panel.

Collapse the groups, switch the workspace

A chat thread, not a chat widget

Bubbles, avatars, timestamps, hover actions and the three-dot typing indicator whose bounce ripples left to right. The thread scrolls; the composer stays put.

Add an empty state to the data table when there are no rows.
K
Koala2:34 PM

Done. I dropped an EmptyState into the table body:

  • Renders when rows.length === 0.
  • Reuses our EmptyState (icon, title, action).
  • Stays hidden while loading so the skeleton shows.
Nice. Now wire it to the loading prop.
K
Hover a message for its actions

Toolbars that fold themselves

Toggle groups, dropdowns, a colour picker and tooltips, all in one roving-focus strip. When the space runs out, the overflow menu takes what doesn't fit.

Toggle the formatting, open the colour picker

A video player built from parts

Play, seek, volume, fullscreen and a buffering spinner, each its own component around a native <video>. No media library underneath — the browser already ships one.

0:00 / 0:00
Scrub the timeline, drag the volume

Dates without a date library

The calendar is hand-rolled: no date-fns, no react-day-picker. Presets, ranges, constraints and keyboard navigation, in about the space those dependencies would have taken.

Pick a date, or use a preset

Inputs that compose

Prefix, suffix, label and hint are separate slots rather than a dozen props, so a search field, a currency field and a phone field with a country selector are the same component wearing different parts.

A search field: label, prefix, field

Multi-select that counts out loud

Grouped options, a filter, and a chip row that animates as it fills. The running total rolls rather than jumps, on the same animated number as the rest of the system.

Pick a few — the count rolls

Density is one token, not a redesign

Density isn't a per-component knob. Toggle it and a whole sign-in block retunes at once: comfortable opens the padding, gaps and title for a roomier marketing feel, compact tightens everything for dense app UI.

Welcome back

Sign in to your account to continue.

Forgot password?

Don't have an account? Sign up

Toggle comfortable and compact

Forty-eight logos that don't exist

Every placeholder brand in the docs is a dependency-free inline SVG on a 32×32 grid, painted with currentColor and optically scaled about its centre. No logo files, no network, and they recolor with the theme.

  • Apex
  • Helio
  • Dewn
  • Cobalt
  • Blossom
  • Forge
Invented brands, inline SVG, no assets

And the sections built on top

The free tier ends at components; the sections are where they earn their keep. This is a spotlight carousel: one quote per slide, autoplaying on a six-second loop that pauses the moment you touch it, and never autoplays at all under reduced motion.

Liam McCabe
Halcyon
Every component was there, styled, and accessible the moment we installed it. We had a real product screen up that same afternoon.
Liam McCabe
Founder, Halcyon
Jordi Espinosa
Forge
With every component and pre-built section ready to compose, work that used to take us a month took a week.
Jordi Espinosa
Engineering Lead, Forge
Carlos Gerónimo
Quanta
Four themes with cream and moonlight, genuinely polished components, and we own every line of the source. It's every design engineer's dream.
Carlos Gerónimo
Product Lead, Quanta
Hover to pause — it never autoplays under reduced motion

How it's built

  • Each component is one tailwind-variants recipe with semantic tokens only — never a raw color
  • Color, type, spacing and motion live as tokens, so a whole app rebrands from one place
  • Radix Slot powers asChild, so any component can lend its behavior to your own markup
  • The CLI ships source, not a bundled dependency — no lock-in, fully yours to edit

Availability

The free tier — every component, the lib helpers and the tokens — installs through the koalaui CLI. A separate PRO tier adds marketing sections, full page examples and templates.