Skip to content

Lightweight, accessible React components.

86 minimalist components. Light or dark, solid or glass. One provider. TypeScript included, no config required.

npm install @fujiui/react
Package
@fujiui/react
Version
v0.5.0
License
MIT
React
React 18+
Components
86
Themes
Light / Dark
Materials
Solid / Glass
Status
Early production preview
In place

Desktop and mobile, same components

One provider, one set of components, laid out for each screen.

MT

Mika Tanaka

Listening to Slow Tide

Mika
still on for tomorrow?
MT
Mika
found the song for the drive
9:38
Why Fuji

Why Fuji UI?

More complete than a primitives kit, less work than rolling your own - and quiet enough that it never becomes your product's personality.

More than a primitives kit

Forms, overlays, navigation, and data display are covered without asking you to assemble every interaction from low-level primitives.

One consistent API

The same size, variant, appearance, and state props everywhere, so you learn the system once.

Token-driven theming

Theme, material, radius, and elevation are CSS variables set once on the provider - no per-component overrides to hunt down.

Accessible first

Keyboard, focus, and contrast take priority over exact visual imitation when the two conflict.

AI coding agents

Fuji UI works with your coding agent

Claude Code, Codex, and Cursor look up the API for the version you have installed, then check the code they write against it.

Set up your agent

Claude Code plugin

Recommended

The MCP server and the skill in one install, for anyone working in Claude Code.

Claude Code
/plugin marketplace add fuji-ui-kit/fuji-ui-react
/plugin install fuji-ui@fuji-ui

MCP server

Props, parts, examples and setup steps from the version you have installed, plus a checker for Fuji UI's conventions.

Terminal
npx -y @fujiui/mcp

Agent skill

Tells Codex, Cursor and other agents when to use those tools and how to set Fuji UI up.

Terminal
npx skills add fuji-ui-kit/fuji-ui-react
Components

Component highlights

Live, not screenshots: type on the board, tilt the listing, switch the rings, scrub the glass player.

View all components

Keyboard

An on-screen board where every cap is a key you can press.

Type on the board. Enter clears.
A bright living room with a pale sofa and tall windows
Guest favourite

Card · Image · Floating Action Bar

The Linen Loft

Nørrebro, Copenhagen

Beds
2
Baths
1
Sq ft
1,150
$620 / night

Revenue this week

Friday highlighted against the weekly average.

Total revenue

$37.7kUp12.4%

Orders
1,284
Avg. order
$29.40
Refunds
0.8%
$7.9k$5.9k$4.0k$2.0k$0.0kMonTueWedThuFriSatSun$7.9kAvg $5.4k
Revenue this week
Revenue, Mon$4.2k
Revenue, Tue$5.1k
Revenue, Wed$3.8k
Revenue, Thu$6.4k
Revenue, Fri$7.9k
Revenue, Sat$5.6k
Revenue, Sun$4.7k

Chat Bubble

Grouped runs, delivery receipts and a typing indicator.

PN
Priya Nair
Review the launch deck before standup?
9:41 AM
Done - two comments on pricing.
9:42 AMRead
KS
Kenji Sato
Kenji is typing

Activity rings

Segmented control, circular progress and rolling digits.

84%Move
66%Exercise
91%Stand

Active minutes

342

8.2%vs. last period

Timeline

A connected run of events, aligned to its own grid.

  1. Opened

    09:02

    Priya opened #482

  2. Reviewed

    11:20

    Two approvals, no changes requested

  3. Info: Checks passed

    11:22

    Build, lint and 1,204 tests

  4. Success: Merged

    11:24

    Squashed into main

Glass material

Quiet Hour

Nami Sato

Examples

Modern apps built with Fuji UI

Eight complete applications, each built from Fuji UI components and tokens alone. Swipe through them - the stage follows the one you pick.

View all examples

Glass Media Dashboard

Glass material · Chat bubbles · Coverflow

Ready to look closer?

Every component, with live previews and the code to paste.

Go to documentation