Components

All 86 components in @fujiui/react, live and interactive. Closely related ones share a page - Box, Container, Stack, Grid and AspectRatio all live under Layout.

Foundation & Layout

Button

Action control with contained, bordered, dashed, ghost, semantic, size, and loading states.

Icon Button

Square icon-only control with sizes, semantic tones, and accessible labels.

Button Group

Single-select control group with shared focus, hover, active, and disabled states.

Title

Body small

Typography

Type scale with semantic display, heading, title, body, and caption variants.

Default link

Link

Accessible anchor styling with color, hover, and underline options.

Divider

Horizontal or vertical separator for grouping related content.

Layout

Composable Box, Container, Stack, Grid, and AspectRatio layout primitives.

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Scroll Area

Themed scroll container with controlled overflow and lightweight scrollbars.

Collapsible

Expandable panel and accordion primitives with controlled and keyboard-accessible states.

Icons

Lucide icon primitive with tones, sizes, and containers.

Renders into document.body while carrying the active theme, material, radius and elevation with it.

Fuji Portal

Renders children into document.body while re-stamping the active appearance on a wrapper, so Fuji's CSS variables still resolve outside the tree.

Storage almost full

Dismiss Button

The bare X control used by dismissible surfaces. No fill, border or shadow - just the glyph, so it never competes with the panel it sits on.

⌘K

Kbd

A single keyboard key or shortcut token, for documenting a binding inline.

Forms

Enter a valid email address.

Form Field

Form label, description, required, invalid, and error-message wiring for controls.

Input

Text field, Textarea, Password, Search, Number, and OTP.

UncheckedChecked

Checkbox

Checkbox control with checked, unchecked, indeterminate, disabled, and labeled states.

Option AOption B

Radio

Single-choice radio group with labels, descriptions, disabled items, and validation states.

OffOn

Switch

Compact on/off control for toggling a setting or feature.

Select

Native select, custom select, and multi-select with chips.

Combobox

Searchable single-select field with keyboard navigation and filtering.

Volume

Slider

Single-value range control with keyboard support and configurable bounds.

Rating

Interactive star rating input with sizes, values, and read-only states.

September 2026

SMTWTFS

Calendar

Interactive month calendar for selecting dates and navigating months.

Date Picker

Date field paired with a popover calendar for selecting one date.

Time Picker

Accessible hour-and-minute selector with keyboard-friendly controls.

File Upload

Button-triggered file upload and drag-and-drop Dropzone with validation states.

Label

A standalone field label. Inside a FormField use FormField.Label instead, which wires up the association for you.

Textarea

Multi-line text input. Registers itself with an ancestor FormField automatically.

Password Input

Password field with a visibility toggle. Obscured by default, and toggling never clears the value.

Search Input

Search field with a leading icon and a clear button once there is a value.

Number Input

Numeric field with increment and decrement steppers. Compact by default; pass fullWidth to stretch it.

OTP Input

One-time-code entry as a row of individually focusable character slots.

Native Select

A styled native <select>. Use it when the platform's own picker is wanted - on mobile especially - and Select when the listbox should match the rest of the UI.

Multi Select

Multi-selection combobox with removable chips for what is chosen.

Navbar

Responsive top navigation bar with logo, links, and actions.

Sidebar

Vertical navigation panel for grouped links, active states, and disabled items.

src

index.ts

README.md

Tree

Recursive expandable tree with roving-tabindex keyboard navigation, for file browsers and nested navigation.

Bottom Navigation

Responsive mobile navigation bar with icons, labels, and active state.

Breadcrumb

Hierarchical page navigation with current-page and collapsed-path states.

Floating Action Bar

A speed dial: a circular trigger that fans a column of labelled actions out from itself.

Overview panel

Tabs

Tabbed navigation and segmented controls with panels, active states, and responsive layouts.

Pagination

Page navigation with compact, full, disabled, and responsive variants.

Account
Profile
Done

Stepper

Clickable multi-step progress indicator for workflows and forms.

Dropdown Menu

Trigger-based menu for actions, groups, disabled items, and keyboard navigation.

Command Menu

Keyboard-friendly command palette for searching and launching actions.

Segmented Control

Inline single-choice control for view toggles and density switches, with a sliding indicator.

Data Display

PN
Priya Nair opened a PR
KS
Kenji Sato left a review

Loading more…

Infinite Scroll

Loads the next page when the end of a list or table scrolls into view, in place of a pager.

Plan

Pro tier

Card

Composable content surface with title, description, content, and footer slots.

DefaultSolidSquare

Badge

Compact semantic status, count, or category label with soft visual treatment.

AB+1

Avatar

Avatar images, initials, status indicators, and grouped overflow presentations.

Row one
Row two

List

Composable rows with leading content, metadata, dividers, selection, and states.

Plan: Pro
Seats: 5

Description List

Key-value content layout with horizontal, vertical, bordered, and responsive modes.

Name	Role
Lyka	Designer
Kenji	Engineer

Table

Responsive tables and sortable DataTable layouts with pagination and selection patterns.

Weekly signups

Weekly signups
Signups, Day 1	40
Signups, Day 2	58
Signups, Day 3	48
Signups, Day 4	76
Signups, Day 5	64

Chart

Responsive line, bar, and donut charts with tooltips, legends, axes, and animation.

Revenue

$12,480

8.2%

Statistic

Animated statistic value with labels, prefixes, suffixes, and positive or negative change.

Order placed
9:02am
Success: Shipped
2:14pm

Timeline

Event history layout with status dots, timestamps, descriptions, and left/right/alternating alignment.

No results

Try a different search.

Empty State

Clear no-results state with message, optional illustration, and recovery action.

Image

Responsive image with loading and error states plus an accessible fullscreen preview.

Carousel

Autoplay slides with arrows, dots, and multi-slide layouts.

Priya Nair

Can you review the PR before standup?

9:41 AM

On it now.

9:42 AMRead

Chat Bubble

Incoming/outgoing message bubbles with avatar, sender, timestamp, delivery status, and grouped runs.

Keyboard

Full on-screen keyboard in 100%, 75%, 65%, phone and numpad layouts, static or interactive.

tsx

<Button>Save changes</Button>

Code Block

A plain code block with an optional copy control. No syntax highlighting by design, so it ships no highlighting dependency.

PNKSMR+1

Avatar Group

Overlapping stack of avatars with a "+N" tile once the list runs past its limit.

Feedback

Heads up

A new version is available.

Alert

Inline feedback banner for information, success, warning, and error messages.

Toast

Temporary feedback notification with semantic variants and dismiss behavior.

New comment

2m ago

Kenji replied to your PR.

Notification

Notification row with avatar or icon, metadata, unread state, and actions.

Uploading

Progress

Linear and circular progress indicators with determinate and loading states.

Spinner

Lightweight indeterminate loading indicator for inline and centered states.

Skeleton

Animated loading placeholder for text, avatars, cards, tables, and images.

Payment complete

A receipt was sent to your email.

Result

Full-section success, error, warning, or empty outcome state with recovery actions.

OnlineAway

Status Indicator

Small status marker with semantic color and a readable label.

62%

Circular Progress

Progress as a ring, determinate or indeterminate, with the percentage optionally in the centre.