αAlpha UI
Browse catalog
Introduction

Build consistent interfaces without slowing down product work.

Alpha UI is a React component system for teams that want fast implementation and reliable defaults. It includes polished primitives, typed APIs, and predictable composition patterns.

60

Production-ready components

4

Organized component families

Type-safe

Typed props and stories included

Normal Details

This documentation focuses only on components already built in the library. Every section here is practical: install, compose, test states, and ship UI screens without custom glue code.

Technical Details

The docs are aligned with the package export surface to keep examples production-safe. Component usage, props, and grouped taxonomy are intentionally consistent with build output and typed APIs.

Installation

Install Alpha UI once, then import what you need. Tree-shaking keeps your bundle compact.

Terminal
npm install alpha-ui-kit

Quick Start

A small setup showing card-based composition plus the new form primitives.

app.tsx
import { Button, Card, Input, Textarea } from 'alpha-ui-kit'
import 'alpha-ui-kit/styles.css'

export default function App() {
  return (
    <Card className="max-w-xl">
      <Input label="Name" placeholder="Ada Lovelace" />
      <Textarea label="Project Brief" rows={4} />
      <Button className="mt-4">Create Project</Button>
    </Card>
  )
}

Buttons

Live playground: change props from controls and see both output and generated code update instantly.

Live output

buttons-playground.tsx
import { Button } from 'alpha-ui-kit'

export default function Example() {
  return (
    <Button variant="contained" color="primary" size="medium">
      Continue
    </Button>
  )
}

Inputs

Alpha UI provides a complete family of form controls — Input, Select, Textarea, Checkbox, RadioGroup, Switch, Calendar — all sharing a consistent label / helper-text / error-state API.

Form Composition

All input primitives work side-by-side inside a real form. Every field shares the same prop model: label, helperText, error, disabled, required.

Use full legal name.

Choose your primary stack.

View Source

Input Types

The Input component passes the type prop directly to the underlying <input> element, giving you access to every native HTML input type with a consistent label and helper-text wrapper.

All HTML Input Types

Email, password, number, search, tel, url, date, time, datetime-local, month, week, and color — all work out of the box.

View Source

The Complete Alpha UI Input System Guide

Everything you need to know about building production-quality forms: from basic wiring to advanced validation, accessibility, and composition patterns.

Chapter 1

What Is a Form Input — and Why Should You Care?

A form input is the primary mechanism through which a user gives information to your application. Every piece of user-generated content — a username, password, search term, date, rating, phone number, colour preference — starts with some kind of input control. Despite how simple that sounds, form inputs are deceptively complex to build correctly. They have to handle keyboard navigation, mouse interaction, touch events on mobile, paste events, autofill from browsers, screen reader announcements, label associations, placeholder text, error messaging, and a host of other concerns before a single character of your product logic even runs.

Alpha UI's input system handles all of this infrastructure so you never have to write it yourself. Every field component in the library — Input, TextField, Select, Textarea, Checkbox, Switch, RadioGroup, Slider, Rating, and Autocomplete — runs on top of semantically correct HTML, ARIA roles, and a shared visual language so your forms feel immediately consistent, no matter which combination you use.

Consistent API

Every control shares label, helperText, error, disabled, and required — so swapping one control for another costs zero API re-learning.

Accessible by default

Labels are wired to inputs via htmlFor / aria-describedby automatically. Screen readers announce errors and helper text without extra markup.

Zero CSS required

Focus rings, hover states, error colours, and disabled styling are all built-in. Drop into any layout and it looks right immediately.

Chapter 2

The Anatomy of Every Alpha UI Input

Every input component is built from four distinct visual zones. Understanding this anatomy helps you predict how props affect the rendered output and makes debugging significantly faster when something looks wrong.

Label zone

The label is rendered as an HTML <label> element and programmatically linked to the input via the htmlFor attribute. This is what screen readers announce when the field receives focus. In "outlined" inputs the label floats above the border; in "standard" inputs it sits above a bottom line. Clicking the label focuses the input — a core accessibility requirement that Alpha UI handles for you.

Input zone

The core interactive region — the rendered <input>, <textarea>, or <select> HTML element. This zone handles all keyboard and pointer events, browser autofill, paste events, composition events (for CJK input methods), and mobile soft-keyboard interactions. The border and focus ring live here and change colour based on the field's current state: default, focused, error, or disabled.

Helper text zone

Rendered below the input, the helper text provides contextual guidance — format expectations, character limits, or hints. In Alpha UI this text is automatically wired via aria-describedby so screen readers include it in the field's accessible description. When helperText and error are both passed, error wins and visually replaces the helper text in red.

Adornment zone

Start and end adornments allow you to embed icons, currency symbols, unit labels, or action buttons inside the input border without changing layout. Alpha UI handles the padding adjustments automatically so the text cursor always has sufficient space. Common uses include search icons (start) and clear buttons or show-password toggles (end).

Chapter 3

Controlled vs Uncontrolled — Understanding React Input State

This is one of the most misunderstood concepts in React forms. Every Alpha UI input can operate in one of two modes and choosing the right one determines how much boilerplate your form needs, how testable it is, and whether you need any external form library at all.

Uncontrolled ✦ Use for simple forms

You provide a defaultValue and let the DOM manage the rest. You only read the value when you need it — typically on form submit via a ref or FormData API. This is the fastest to implement and has zero re-renders as the user types.

When to use it: static registration forms, search bars, one-time settings screens where the value doesn't need to be mirrored into other parts of the UI.

// Uncontrolled usage
<Input
  label="Username"
  defaultValue="ada_lovelace"
  // value is NOT tracked in state
/>

Controlled ✦ Use for dynamic forms

You store the value in React state via useState and pass both value and onChange. Every keystroke triggers a re-render. In return you get full real-time control: live character-count displays, instant validation, conditional field visibility, dependent dropdowns, and real-time form submission state.

When to use it: multi-step wizards, dynamic field visibility, live search, form states that affect other parts of the page.

// Controlled usage
const [name, setName] = useState('')

<Input
  label="Username"
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

⚠ Never mix the two modes for the same field

Providing both value and defaultValue on the same input, or switching from controlled (value defined) to uncontrolled (value={undefined}) mid-lifecycle, causes React to throw a warning and can produce unexpected behavior. Choose one mode and stick with it for the life of the component.

Chapter 4

Validation Strategies — From Simple to Production-Grade

Validation is where most form implementations get messy. Alpha UI doesn't prescribe a specific validation library — instead it provides a clean error prop that accepts a string. When non-empty, the field enters an error visual state and the error string replaces the helperText below the field. You drive validation logic yourself and pass the result into this prop.

Inline (on change)

✓ Pros

Immediate feedback. Great for format validation (email format, phone number pattern). Low cognitive load for users.

✗ Cons

Can feel aggressive — showing "Invalid email" while the user is still typing "user@" is confusing. Solve with a debounce or by only validating after the field has been blurred at least once.

const [emailErr, setEmailErr] = useState('')
const [touched, setTouched] = useState(false)

const validate = (v: string) =>
  touched && !/^[^@]+@[^@]+$/.test(v)
    ? 'Enter a valid email address'
    : ''

<Input
  label="Email"
  type="email"
  onChange={(e) => setEmailErr(validate(e.target.value))}
  onBlur={() => setTouched(true)}
  error={emailErr}
/>
On blur

✓ Pros

User finishes typing before seeing any error. Feels balanced and non-intrusive. The most widely recommended UX pattern.

✗ Cons

Errors only appear after the user leaves each field. On a long form, they may not see all errors until they try to submit.

<Input
  label="Name"
  onBlur={(e) => {
    if (!e.target.value)
      setNameError('Name is required')
    else
      setNameError('')
  }}
  error={nameError}
/>
On submit

✓ Pros

Validates the entire form at once. Great for short forms (login, contact). Users aren't interrupted while filling in.

✗ Cons

No real-time guidance. Users may be surprised by multiple errors appearing together on submit.

function handleSubmit() {
  const errs: Record<string,string> = {}
  if (!name) errs.name = 'Required'
  if (!email) errs.email = 'Required'
  setErrors(errs)
  if (Object.keys(errs).length === 0) submit()
}
Chapter 5

Every HTML Input Type — When and Why to Use It

The type prop on Alpha UI's Input maps directly to the HTML input type attribute. Choosing the right type gives you free browser features: appropriate soft keyboards on mobile, native picker UIs, built-in format validation, and browser autofill categories. Here's every type and why it matters:

TypeHTML ValueWhen to Use
TexttextGeneric single-line text — names, usernames, short answers.
EmailemailEmail addresses. Triggers browser autofill and validates basic email format on submit.
PasswordpasswordPasswords and secrets. Masks characters. Browser password managers are activated.
NumbernumberInteger or decimal quantities. Adds incrementer arrows. Use Slider for visual range inputs.
SearchsearchSearch fields. Some browsers add a clear ✕ button. Semantic hint for assistive tech.
TeltelPhone numbers. Does NOT validate format — pair with a mask library. Summons numeric keypad.
URLurlWebsite or link URLs. Validates basic URL format. Autofill offers recent visited URLs.
DatedateDate pickers (YYYY-MM-DD). Each browser renders its own native date widget. Use Calendar for a custom UI.
TimetimeHH:MM time selection. Native OS time picker. Good for scheduling fields.
Datetime-localdatetime-localCombined date and time. Good for appointment or event creation forms.
Month / Weekmonth / weekMonth or ISO week selection. Rarely used but handy for billing cycle or sprint planning forms.
ColorcolorNative OS colour picker. Returns a hex value. Good for user theme or label customisation features.
Chapter 6

Accessibility — Building Forms That Work for Everyone

WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) requires that form labels be programmatically associated with their inputs. Success Criterion 3.3.1 requires that error identification is presented as text. Alpha UI satisfies both automatically. Here's what the library does for you and what you still need to consider:

✓

Label–input association (handled by Alpha UI)

Every label element receives an htmlFor attribute that matches the input's generated id. Screen readers (NVDA, JAWS, VoiceOver) announce the label text when focus moves to the field.

✓

Error announcement (handled by Alpha UI)

When the error prop is set, the error text is linked via aria-describedby. VoiceOver and other screen readers will announce "Name — required — This field is required" when the user focuses the errored field.

✓

Disabled state (handled by Alpha UI)

Disabled inputs receive the HTML disabled attribute, not just a visual style. This prevents keyboard focus entirely, which is the correct accessible behavior.

✓

Focus indication (handled by Alpha UI)

All inputs show an 8px focus ring on keyboard focus. This satisfies WCAG 2.4.7 (Focus Visible).

!

Required indication (your responsibility)

The required prop adds the HTML required attribute. You should also add a visual asterisk (*) or note in the label when using required, since colour alone ("the red fields are required") fails WCAG 1.4.1 (Use of Colour).

!

Group labelling (your responsibility)

When grouping related inputs (e.g. a RadioGroup or a set of checkboxes), wrap them in a <fieldset> with a <legend>. Alpha UI's RadioGroup renders the outer group with role="radiogroup" and aria-label, but if you compose your own groups you need to add this manually.

!

Live regions for async errors (your responsibility)

If you validate a field by hitting a server and the error arrives asynchronously, the error message won't be announced unless you add aria-live="polite" to the error region. Alpha UI's static error does not currently implement live regions — this is your responsibility for async validation flows.

Chapter 7

Integrating with Form Libraries (React Hook Form, Formik, Zod)

Alpha UI inputs work seamlessly with any form-state library because they expose standard React props — value, onChange, onBlur, name, ref. You can spread a React Hook Form register() result directly:

React Hook Form

import { useForm } from 'react-hook-form'
import { Input } from 'alpha-ui-kit'

function Form() {
  const { register, formState: { errors } } = useForm()
  return (
    <Input
      label="Email"
      type="email"
      {...register('email', {
        required: 'Email is required',
        pattern: {
          value: /^[^@]+@[^@]+$/,
          message: 'Invalid email',
        },
      })}
      error={errors.email?.message}
    />
  )
}

Zod + React Hook Form

import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'

const schema = z.object({
  email: z.string().email('Invalid email'),
  name: z.string().min(2, 'Min 2 characters'),
})

const { register, formState } = useForm({
  resolver: zodResolver(schema),
})
Chapter 8

Which Component Should I Use? — Input vs TextField vs Textarea vs Select

Alpha UI ships several text-entry components and knowing which to reach for saves time and avoids re-works later. Think of them as levels of abstraction: Input is the base primitive, TextField is a smart wrapper that unifies Input, Textarea, and Select in a single API.

ComponentRendersBest for
Input<input>Single-line text entry of any type. Use this for 80% of form fields.
TextField<input> | <textarea> | <select>When you want one import that covers all three. Use multiline prop for textarea mode, select prop for select mode.
Textarea<textarea>Long-form text: bios, comments, project descriptions, code snippets. Supports resizable height.
Select<select>Choosing one option from a fixed list. Pairs well with <option> children. For searchable lists, use Autocomplete instead.
AutocompleteCustom comboboxLarge option lists (50+ items) where search-to-filter is required. Supports multi-select, free-text entry (freeSolo), and async loading.
Chapter 9

Performance Tips — Keeping Forms Fast at Scale

Large forms with many controlled inputs re-render on every keystroke. For most forms (under 20 fields) this is completely acceptable — React is fast enough to handle it without any optimization. However when performance becomes a concern (very large forms, forms inside long scrollable lists, forms in animation sequences) these techniques help:

Split state per field (avoid single object)

// ❌ Everything re-renders on any change
const [form, setForm] = useState({ name: '', email: ''})
// ✅ Only affected field re-renders
const [name, setName] = useState('')
const [email, setEmail] = useState('')

Debounce onChange for async validation

import { useDeferredValue } from 'react'

const deferredEmail = useDeferredValue(email)
// Run server-side check against deferredEmail
// not against email directly

Use uncontrolled inputs for read-once fields

const nameRef = useRef<HTMLInputElement>(null)

function handleSubmit() {
  console.log(nameRef.current?.value)
}

<Input label="Name" ref={nameRef} />

Use React Hook Form for large forms

// React Hook Form re-renders only affected fields
// NOT the entire form on every keystroke
// It is uncontrolled under the hood with a thin wrapper

TextField — All Variants in One Component

The TextField unifies outlined, filled, standard, error, multiline, and select modes. Use a single import and switch modes via props instead of importing different components per use-case.

This value is invalid

Use multiline for longer text

Select rendered from the same TextField wrapper

View Source

TextField Props API

PropTypeDefaultDescription
labelstring—Label displayed for the text field.
variant'outlined' | 'filled' | 'standard' | 'error''outlined'Visual variant of the field.
placeholderstring—Placeholder text when empty.
valuestring—Controlled value.
defaultValuestring—Default value for uncontrolled usage.
onChange(e: ChangeEvent) => void—Change event handler.
helperTextstring—Hint text shown below the field.
errorstring—Error message; activates error state.
multilinebooleanfalseIf true, renders a textarea instead of input.
rowsnumber—Number of rows for multiline mode.
selectbooleanfalseIf true, renders a select element.
disabledbooleanfalseDisables the field.
requiredbooleanfalseMarks field as required.
fullWidthbooleanfalseExpands to fill container.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Basic Components

Buttons, form controls, badges, alerts, cards, avatars, chips, and typography — the building blocks of every Alpha UI interface.

Button

Interactive action element with variants, colors, sizes, loading states, and icon support.

Button

Variants & Colors

Sizes

States & Icons

Button — Code

Interactive action element with multiple variants, colors, sizes, and icon support.

View Source

Button Props API

PropTypeDefaultDescription
variant'contained' | 'outlined' | 'text''contained'Visual style of the button.
color'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info''primary'Color palette applied to the button.
size'small' | 'medium' | 'large''medium'Controls padding and font size.
fullWidthbooleanfalseIf true, the button expands to fill its container.
disabledbooleanfalseIf true, the button is non-interactive.
isLoadingbooleanfalseShows a spinner and disables the button.
startIconReact.ReactNode—Element placed before the child label.
endIconReact.ReactNode—Element placed after the child label.
hrefstring—If provided, renders the button as an anchor tag.
onClick(e: MouseEvent) => void—Click event handler.
classNamestring—Additional CSS classes.
children*React.ReactNode—Button label content.
* Required prop · Props not listed above are passed through to the underlying DOM element.

ButtonGroup

Groups related buttons with shared borders and consistent styling. Supports horizontal and vertical orientation.

View Source

ButtonGroup Props API

PropTypeDefaultDescription
variant'contained' | 'outlined' | 'text''outlined'Visual style applied to all child buttons.
color'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info''primary'Color applied to the grouped buttons.
size'small' | 'medium' | 'large''medium'Size applied uniformly to all buttons in the group.
orientation'horizontal' | 'vertical''horizontal'Direction of the button group layout.
disabledbooleanfalseDisables all buttons in the group.
children*React.ReactNode—Button elements to group together.
* Required prop · Props not listed above are passed through to the underlying DOM element.

IconButton

Circular button for icon-only actions with full color, size, and disabled state support.

View Source

IconButton Props API

PropTypeDefaultDescription
color'default' | 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info''default'Color of the icon button.
size'small' | 'medium' | 'large''medium'Controls the padding and icon size.
disabledbooleanfalseIf true, the button is non-interactive.
edge'start' | 'end' | falsefalseAdjusts horizontal margin for edge positioning.
onClick(e: MouseEvent) => void—Click event handler.
children*React.ReactNode—Icon to render inside the button.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Floating Action Button (FAB)

The FAB represents the primary action of a screen. Supports circular and extended variants with full color control.

View Source

Fab Props API

PropTypeDefaultDescription
variant'circular' | 'extended''circular'Use 'extended' to show label text alongside the icon.
color'primary' | 'secondary' | 'success' | 'error' | 'default''primary'Background color of the FAB.
size'small' | 'medium' | 'large''large'Controls the size of the button.
disabledbooleanfalseIf true, the FAB is non-interactive.
onClick(e: MouseEvent) => void—Click event handler.
children*React.ReactNode—Icon or content to render inside the FAB.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Toggle Button

Toggle buttons can be used to group related options. ToggleButtonGroup supports exclusive single-select and multiple-select modes.

View Source

ToggleButton Props API

PropTypeDefaultDescription
value*string—The value used when selected in a ToggleButtonGroup.
selectedbooleanfalseIf true, the button appears in the selected/active state.
disabledbooleanfalseIf true, the button is non-interactive.
color'primary' | 'secondary' | 'success' | 'error' | 'warning''primary'Color palette for selected state.
size'small' | 'medium' | 'large''medium'Button size.
* Required prop · Props not listed above are passed through to the underlying DOM element.

ToggleButtonGroup Props API

PropTypeDefaultDescription
valuestring | string[]—Currently selected value(s). Use array for multi-select.
exclusivebooleanfalseIf true, only one button can be selected at a time.
onChange(value: string | string[]) => void—Callback when selection changes.
color'primary' | 'secondary' | 'success''primary'Color applied to selected buttons.
size'small' | 'medium' | 'large''medium'Size applied to all child buttons.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Input

Flexible text input with label, helper text, error states, adornments, and all HTML input type support.

Full legal name.

This field is required.

View Source

Input Props API

PropTypeDefaultDescription
labelstring—Label displayed above the input.
typestring'text'HTML input type (text, email, password, number, etc.).
placeholderstring—Placeholder text shown when empty.
valuestring—Controlled value.
defaultValuestring—Default value for uncontrolled usage.
onChange(e: ChangeEvent<HTMLInputElement>) => void—Change event handler.
helperTextstring—Hint text shown below the input.
errorstring—Error message; sets the field into an error state.
disabledbooleanfalseIf true, the input is non-interactive.
requiredbooleanfalseMarks the field as required.
fullWidthbooleanfalseExpands the input to fill its container.
startAdornmentReact.ReactNode—Element displayed at the start of the input.
endAdornmentReact.ReactNode—Element displayed at the end of the input.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Select

Native select wrapper with label, helper text, validation states, and size variants.

Please select a value.

View Source

Select Props API

PropTypeDefaultDescription
labelstring—Label above the select.
valuestring—Controlled selected value.
defaultValuestring—Uncontrolled default selected value.
onChange(e: ChangeEvent<HTMLSelectElement>) => void—Change handler.
helperTextstring—Helper text below the select.
errorstring—Error message.
disabledbooleanfalseDisables the select.
requiredbooleanfalseMarks field as required.
size'small' | 'medium''medium'Controls the select size.
children*React.ReactNode—Option elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Textarea

Multi-line text input with the same ergonomic API as Input — label, helper text, error states, and controlled/uncontrolled support.

Max 500 characters.

View Source

Textarea Props API

PropTypeDefaultDescription
labelstring—Label above the textarea.
valuestring—Controlled value.
defaultValuestring—Default value (uncontrolled).
onChange(e: ChangeEvent<HTMLTextAreaElement>) => void—Change handler.
rowsnumber3Number of visible rows.
placeholderstring—Placeholder text.
helperTextstring—Helper text below the field.
errorstring—Error message.
disabledbooleanfalseDisables the field.
requiredbooleanfalseMarks field as required.
fullWidthbooleanfalseExpands to fill container.
resize'none' | 'vertical' | 'horizontal' | 'both''vertical'CSS resize behavior.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Calendar

Date input primitive with label, helper text, validation states, and min/max date constraints.

May 2026
View Source

Calendar Props API

PropTypeDefaultDescription
labelstring—Label above the date input.
valuestring—Controlled date value (ISO string or YYYY-MM-DD).
defaultValuestring—Default date value.
onChange(e: ChangeEvent<HTMLInputElement>) => void—Change handler.
helperTextstring—Helper text shown below the input.
errorstring—Error message.
disabledbooleanfalseDisables the field.
requiredbooleanfalseMarks field as required.
minstring—Minimum selectable date.
maxstring—Maximum selectable date.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Checkbox

Accessible boolean toggle with optional label, description, and indeterminate state. Supports all semantic color variants.

View Source

Checkbox Props API

PropTypeDefaultDescription
labelstring—Label text next to the checkbox.
descriptionstring—Secondary description below the label.
checkedboolean—Controlled checked state.
defaultCheckedbooleanfalseDefault checked state (uncontrolled).
indeterminatebooleanfalseIf true, shows an indeterminate state.
onChange(e: ChangeEvent<HTMLInputElement>) => void—Change handler.
color'primary' | 'secondary' | 'success' | 'error' | 'warning''primary'Accent color when checked.
disabledbooleanfalseIf true, the checkbox is non-interactive.
size'small' | 'medium''medium'Controls box and icon size.
* Required prop · Props not listed above are passed through to the underlying DOM element.

RadioGroup

Single-select option groups. Use RadioGroupItem for each option with label and optional description text.

View Source

RadioGroup Props API

PropTypeDefaultDescription
valuestring—Controlled selected value.
defaultValuestring—Default selected value (uncontrolled).
onChange(value: string) => void—Called when the selected option changes.
namestring—Name attribute applied to all radio inputs.
rowbooleanfalseIf true, options layout horizontally.
children*React.ReactNode—RadioGroupItem elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Switch

Toggle control for boolean settings. Supports labels, descriptions, color variants, and controlled/uncontrolled usage.

View Source

Switch Props API

PropTypeDefaultDescription
labelstring—Label text next to the toggle.
descriptionstring—Secondary description below the label.
checkedboolean—Controlled on/off state.
defaultCheckedbooleanfalseDefault state (uncontrolled).
onChange(e: ChangeEvent<HTMLInputElement>) => void—Change handler.
color'primary' | 'secondary' | 'success' | 'error''primary'Track color when on.
disabledbooleanfalseIf true, the switch is non-interactive.
size'small' | 'medium''medium'Size of the toggle.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Autocomplete

Combobox input with searchable dropdown. Useful for filtering from large datasets with keyboard navigation support.

View Source

Autocomplete Props API

PropTypeDefaultDescription
options*Array<{label: string; value: unknown}>—Array of selectable options.
valueOption | null—Controlled selected option.
onChange(option: Option | null) => void—Callback when selection changes.
labelstring—Label above the combobox input.
placeholderstring—Placeholder text.
multiplebooleanfalseIf true, allows multiple selections.
disabledbooleanfalseDisables the control.
loadingbooleanfalseShows a loading spinner in the dropdown.
freeSolobooleanfalseAllows arbitrary text values not in options list.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Rating

Star-rating input with fractional precision support, read-only display mode, and customizable max stars.

Rating: 3.5
View Source

Rating Props API

PropTypeDefaultDescription
valuenumber | null—Controlled rating value.
defaultValuenumber—Default rating (uncontrolled).
onChange(value: number | null) => void—Callback with new rating.
maxnumber5Maximum number of stars.
precisionnumber1Minimum increment (e.g. 0.5 for half stars).
size'small' | 'medium' | 'large''medium'Star icon size.
readOnlybooleanfalseIf true, the rating is display-only.
disabledbooleanfalseIf true, the rating is non-interactive.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Slider

Range slider for numeric value selection. Supports controlled mode, step increments, marks, and range (dual-thumb) selection.

Volume50%
View Source

Slider Props API

PropTypeDefaultDescription
valuenumber | number[]—Controlled slider value. Use array for range mode.
defaultValuenumber | number[]—Default value (uncontrolled).
onChange(value: number | number[]) => void—Callback with new value(s).
minnumber0Minimum allowed value.
maxnumber100Maximum allowed value.
stepnumber1Granularity of each step.
color'primary' | 'secondary' | 'success''primary'Track and thumb color.
disabledbooleanfalseIf true, interaction is disabled.
marksboolean | Array<{value: number; label?: string}>falseShow tick marks along the track.
valueLabelDisplay'auto' | 'on' | 'off''off'Controls when the value label appears.
orientation'horizontal' | 'vertical''horizontal'Slider orientation.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Card

Composable surface with variant support (elevated, outlined, filled) and optional hover lift effect.

Project Alpha

System design and architecture

Deploying consistent UI primitives across 14 product teams.

View Source

Card Props API

PropTypeDefaultDescription
variant'elevated'|'outlined'|'filled''elevated'Visual style of the card surface.
hoverablebooleanfalseIf true, adds hover lift/shadow effect.
classNamestring—Additional CSS classes.
children*React.ReactNode—CardHeader, CardContent, CardFooter slots.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Badge

Small semantic status indicators with color variants for default, primary, success, warning, danger, and info states.

DefaultPrimarySuccessWarningDanger
View Source

Badge Props API

PropTypeDefaultDescription
variant'default'|'primary'|'success'|'warning'|'danger'|'info''default'Semantic color variant.
size'sm'|'md'|'lg''md'Badge size.
classNamestring—Additional CSS classes.
children*React.ReactNode—Badge label content.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Alert

Informational callout with title and description primitives, close button support, and semantic color variants.

Heads up

Your session is about to expire. Please save your work.

Success

Your project has been successfully deployed to production.

Error

Something went wrong. Please try again later.

View Source

Alert Props API

PropTypeDefaultDescription
variant'info'|'success'|'warning'|'error''info'Semantic color and icon variant.
closablebooleanfalseIf true, renders a dismiss button.
onClose() => void—Callback when dismissed.
iconReact.ReactNode—Override the default icon.
classNamestring—Additional CSS classes.
children*React.ReactNode—Alert content (AlertTitle, AlertDescription).
* Required prop · Props not listed above are passed through to the underlying DOM element.

Avatar & AvatarGroup

User identity component with image source, fallback initials, size variants, and grouped stacking with overflow count.

JD
AL
MK
A
B
C
+2
View Source

Avatar Props API

PropTypeDefaultDescription
srcstring—Image source URL.
altstring—Alt text for the image.
size'xs'|'sm'|'md'|'lg'|'xl''md'Avatar diameter.
variant'circular'|'rounded'|'square''circular'Shape of the avatar.
classNamestring—Additional CSS classes.
childrenReact.ReactNode—AvatarFallback element shown when image fails.
* Required prop · Props not listed above are passed through to the underlying DOM element.

AvatarGroup Props API

PropTypeDefaultDescription
maxnumber5Maximum number of avatars before a +N overflow badge.
totalnumber—Override the calculated total for the overflow badge.
spacing'small' | 'medium''medium'Controls the overlap between avatars.
classNamestring—Additional CSS classes.
children*React.ReactNode—Avatar elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Chip

Compact display and input tokens for selections, filters, and actions. Supports filled/outlined variants, avatar, icon, and delete button.

Clickable
Deletable
Success
Error
Primary
Info
View Source

Chip Props API

PropTypeDefaultDescription
label*string—The text content of the chip.
variant'filled'|'outlined''filled'Visual style of the chip.
color'default'|'primary'|'secondary'|'success'|'error'|'warning'|'info''default'Chip color.
size'small'|'medium''medium'Size of the chip.
avatarReact.ReactNode—Avatar element for the start of the chip.
iconReact.ReactNode—Icon element for the start of the chip.
onDelete() => void—If provided, shows a delete icon.
onClick() => void—Click handler (makes chip interactive).
disabledbooleanfalseIf true, chip is non-interactive.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Typography

Standardized text routing primitive that maps semantic variants (h1–h6, subtitle, body, caption) to correct HTML tags and styles.

h3. Heading

subtitle1. Lorem ipsum dolor sit amet.

body2. Consectetur adipiscing elit.

caption. Important note
View Source

Typography Props API

PropTypeDefaultDescription
variant'h1'|'h2'|'h3'|'h4'|'h5'|'h6'|'subtitle1'|'subtitle2'|'body1'|'body2'|'caption'|'overline'|'inherit''body1'Typographic style variant.
color'primary'|'secondary'|'textPrimary'|'textSecondary'|'error'|'success'|'warning'|'info'|'inherit''inherit'Semantic color applied to the text.
align'left'|'center'|'right'|'justify'|'inherit''inherit'Text alignment.
gutterBottombooleanfalseAdds margin-bottom.
noWrapbooleanfalsePrevents text wrapping with ellipsis overflow.
paragraphbooleanfalseIf true, renders as a paragraph with margin.
componentReact.ElementType—Override the element type (polymorphic).
classNamestring—Additional CSS classes.
children*React.ReactNode—Text content.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Link

Navigational anchor with customizable underline behavior and semantic color tokens that integrate with the Alpha UI theme.

Always UnderlineHover UnderlineNo Underline
View Source

Link Props API

PropTypeDefaultDescription
href*string—URL the link navigates to.
underline'always'|'hover'|'none''hover'Underline display behavior.
color'primary'|'secondary'|'info'|'error'|'success'|'textPrimary'|'textSecondary''primary'Link text color.
targetstring—HTML target attribute (e.g. "_blank").
relstring—HTML rel attribute.
classNamestring—Additional CSS classes.
children*React.ReactNode—Link content.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Layout Components

Container, grid, navbar, sidebar, stack, and overlay panels structure entire product surfaces with reusable layout primitives.

Box

The foundational layout building block. Polymorphic via the 'as' prop — renders any HTML element while accepting all class utilities.

Flexible Box Container
View Source

Box Props API

PropTypeDefaultDescription
askeyof JSX.IntrinsicElements | React.ComponentType'div'Polymorphic element type to render.
classNamestring—Additional CSS classes for styling.
childrenReact.ReactNode—Content rendered inside the box.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Container

Centers content horizontally with a configurable max-width breakpoint. The most basic responsive layout element.

Centered Container Content (Medium)

View Source

Container Props API

PropTypeDefaultDescription
size'sm' | 'md' | 'lg' | 'xl' | '2xl''lg'Max-width breakpoint of the container.
disableGuttersbooleanfalseRemoves horizontal padding.
classNamestring—Additional CSS classes.
children*React.ReactNode—Container content.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Grid

Flexible CSS grid utility with column count, gap, and optional responsive collapse to single column on small screens.

1
2
3
View Source

Grid Props API

PropTypeDefaultDescription
columnsnumber12Number of grid columns.
gap'none' | 'sm' | 'md' | 'lg''md'Gap between grid cells.
responsivebooleanfalseIf true, collapses to 1 column on mobile.
classNamestring—Additional CSS classes.
children*React.ReactNode—Grid cell elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Stack & Divider

The Stack component manages immediate children layout along the vertical or horizontal axis. Divider establishes thematic boundaries between sections.

Inbox
Archived
Trash
Action 1
Action 2
View Source

Stack Props API

PropTypeDefaultDescription
direction'row' | 'column' | 'row-reverse' | 'column-reverse''column'Flex direction of the stack.
spacingnumber | string0Gap between children (CSS gap or Tailwind scale).
dividerReact.ReactNode—Element inserted between each child.
alignItemsstring—CSS align-items value.
justifyContentstring—CSS justify-content value.
flexWrap'nowrap' | 'wrap' | 'wrap-reverse''nowrap'Controls wrapping.
classNamestring—Additional CSS classes.
children*React.ReactNode—Items to stack.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Divider Props API

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Direction of the dividing line.
flexItembooleanfalseUse when Divider is inside a flex container.
variant'fullWidth' | 'inset' | 'middle''fullWidth'Indentation style.
textAlign'left' | 'center' | 'right''center'Position of optional label text.
childrenReact.ReactNode—Optional text or element rendered on the divider.
* Required prop · Props not listed above are passed through to the underlying DOM element.

AppBar & Toolbar

Standardized top application bar for branding and actions. Toolbar wraps content with consistent gutters and alignment.

Alpha System
View Source

AppBar Props API

PropTypeDefaultDescription
position'fixed' | 'absolute' | 'sticky' | 'static' | 'relative''fixed'CSS positioning strategy.
color'primary' | 'secondary' | 'neutral' | 'transparent''primary'Background color theme.
elevationnumber4Shadow depth (0 = flat).
classNamestring—Additional CSS classes.
children*React.ReactNode—Content, usually a Toolbar.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Toolbar Props API

PropTypeDefaultDescription
variant'regular' | 'dense''regular'Use 'dense' for compact layouts.
disableGuttersbooleanfalseRemoves horizontal padding.
classNamestring—Additional CSS classes.
children*React.ReactNode—Toolbar content.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Navbar

Composable top navigation bar with brand slot, nav items, and fixed/sticky position support for product headers.

View Source

Navbar Props API

PropTypeDefaultDescription
position'fixed' | 'sticky' | 'static''fixed'CSS positioning strategy.
classNamestring—Additional CSS classes.
children*React.ReactNode—Navbar content.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Sidebar

Collapsible side navigation for dashboard layouts with content sections and active state management.

View Source

Sidebar Props API

PropTypeDefaultDescription
variant'permanent' | 'persistent' | 'temporary''permanent'Display behavior of the sidebar.
openbooleantrueControls open/closed state in persistent/temporary modes.
onClose() => void—Callback to close the sidebar.
classNamestring—Additional CSS classes.
children*React.ReactNode—Sidebar content.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Paper

Elevated surfaces that translate physical material depths into UI containers. Control depth with the elevation prop (0–24).

1
3
8
View Source

Paper Props API

PropTypeDefaultDescription
elevationnumber1Shadow depth (0–24). Higher values produce deeper shadows.
variant'elevation' | 'outlined''elevation'Use 'outlined' for a border-based style without shadow.
squarebooleanfalseIf true, removes border radius.
classNamestring—Additional CSS classes.
childrenReact.ReactNode—Content rendered inside the Paper surface.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Drawer

Sliding overlay panel for secondary navigation or settings. Supports left, right, top, and bottom anchors.

View Source

Drawer Props API

PropTypeDefaultDescription
open*boolean—Controls whether the drawer is visible.
onClose*() => void—Callback invoked when the user clicks the backdrop.
anchor'left' | 'right' | 'top' | 'bottom''left'Edge of the screen from which the drawer appears.
variant'temporary' | 'persistent' | 'permanent''temporary'Display behavior of the drawer.
classNamestring—Additional CSS classes.
children*React.ReactNode—Drawer content.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Breadcrumbs

Hierarchical navigation path indicators that help users retrace steps through nested page structures.

View Source

Breadcrumbs Props API

PropTypeDefaultDescription
separatorReact.ReactNode'/'Separator element between breadcrumb items.
maxItemsnumber8Collapsible item count before ellipsis appears.
classNamestring—Additional CSS classes.
children*React.ReactNode—Breadcrumb link/text elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

List

Continuous vertical indexes of text or images. Supports icons, avatars, secondary text, and interactive button items.

  • Main Dashboard

    Overview of all services

  • System Logs

    Last updated 2m ago

View Source

List Props API

PropTypeDefaultDescription
densebooleanfalseReduces item padding for compact layouts.
disablePaddingbooleanfalseRemoves list padding.
subheaderReact.ReactNode—Sticky subheader element.
classNamestring—Additional CSS classes.
children*React.ReactNode—ListItem, ListSubheader elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

BottomNavigation

Mobile sticky navigation controls for primary app destinations. Labels can be always visible or icon-only.

Screen Content...
View Source

BottomNavigation Props API

PropTypeDefaultDescription
valuenumber—Controlled selected action index.
onChange(value: number) => void—Callback when selection changes.
showLabelsbooleanfalseIf true, labels are always visible.
classNamestring—Additional CSS classes.
children*React.ReactNode—BottomNavigationAction elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Masonry

A layout that packs elements into an optimal vertical stack without gaps, ideal for mixed-height content like photo grids.

View Source

Masonry Props API

PropTypeDefaultDescription
columnsnumber4Number of masonry columns.
spacingnumber4Gap between items (Tailwind gap scale).
classNamestring—Additional CSS classes.
children*React.ReactNode—Items to layout in masonry grid.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Hidden

Responsive utility for manual breakpoint visibility control. Use 'up' or 'down' to hide content at specific viewport sizes.

Only Visible on Mobile/Tablet
Only Visible on Desktop
Resize your browser to see the effect.
View Source

Hidden Props API

PropTypeDefaultDescription
up'sm' | 'md' | 'lg' | 'xl'—Hides content at this breakpoint and above.
down'sm' | 'md' | 'lg' | 'xl'—Hides content at this breakpoint and below.
only'sm' | 'md' | 'lg' | 'xl'—Hides content only at this breakpoint.
classNamestring—Additional CSS classes.
children*React.ReactNode—Content to show/hide.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Interactive Components

Dialogs, menus, tabs, accordions, tooltips, transitions, and notifications — all with variant and state control APIs.

Modal

Layered dialog for confirmation and focused tasks. Supports multiple sizes, ESC close, overlay click dismiss, and animated entry.

View Source

Modal Props API

PropTypeDefaultDescription
isOpen*boolean—Controls visibility of the modal.
onClose*() => void—Callback to close the modal.
size'sm' | 'md' | 'lg' | 'xl' | 'full''md'Width of the modal dialog.
closeOnOverlayClickbooleantrueWhether clicking the backdrop closes the modal.
closeOnEscbooleantrueWhether pressing Escape closes the modal.
classNamestring—Additional CSS classes for the modal container.
children*React.ReactNode—Modal content (ModalContent, ModalHeader, etc.).
* Required prop · Props not listed above are passed through to the underlying DOM element.

Dialog

High-level modal abstraction for standard confirmation and information dialogs. A specialized wrapper over Modal.

View Source

Dialog Props API

PropTypeDefaultDescription
isOpen*boolean—Controls visibility of the dialog.
onClose*() => void—Callback to close the dialog.
maxWidth'xs' | 'sm' | 'md' | 'lg' | 'xl''sm'Maximum width of the dialog.
fullWidthbooleanfalseIf true, dialog takes the full max-width.
children*React.ReactNode—Dialog components: DialogTitle, DialogContent, DialogActions.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Dropdown

Contextual action menu for navigation or localized controls. Supports keyboard navigation and destructive action styles.

View Source

Menu

Anchored dropdown menu for multiple contextual actions. Renders via a portal and positions relative to the trigger element.

View Source

Tabs

Segment content into interactive tabbed views. Supports controlled and uncontrolled modes, horizontal and vertical orientations.

Tabs support controlled and uncontrolled modes.
View Source

Tabs Props API

PropTypeDefaultDescription
valuestring—Controlled active tab value.
defaultValuestring—Default active tab (uncontrolled).
onValueChange(value: string) => void—Callback when active tab changes.
orientation'horizontal' | 'vertical''horizontal'Tab list direction.
classNamestring—Additional CSS classes.
children*React.ReactNode—TabsList and TabsContent elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Accordion

Progressive disclosure UI for grouped content. Supports single and multiple open modes with full keyboard navigation.

Supports single and multiple open modes, controlled and uncontrolled usage.
View Source

Accordion Props API

PropTypeDefaultDescription
type'single' | 'multiple''single'Controls whether one or multiple items can open simultaneously.
valuestring | string[]—Controlled open item(s).
defaultValuestring | string[]—Default open item(s) (uncontrolled).
onValueChange(value: string | string[]) => void—Callback when open state changes.
collapsiblebooleanfalseIf true (single mode), active item can be collapsed.
classNamestring—Additional CSS classes.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Tooltip

Hover/focus helper content with automatic placement adjustment. Supports top, bottom, left, right positions.

View Source

Tooltip Props API

PropTypeDefaultDescription
content*React.ReactNode—Content displayed in the tooltip.
position'top' | 'bottom' | 'left' | 'right''top'Preferred placement of the tooltip.
delaynumber0Delay in ms before tooltip appears.
disabledbooleanfalseIf true, the tooltip is not shown.
children*React.ReactNode—Element that triggers the tooltip.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Backdrop

Dimming overlays for focused interactions. Used as the foundation layer for modals, drawers, and dialogs.

Backdrop AreaInjected Backdrop
View Source

Backdrop Props API

PropTypeDefaultDescription
isOpen*boolean—Controls backdrop visibility.
onClick() => void—Callback when backdrop is clicked.
classNamestring—Additional CSS classes.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Toast & Notifications

Transient system feedback via toast notifications. Use the useToast hook to trigger success, error, warning, and info toasts.

View Source

Snackbar

Global elevated notifications at the bottom of the screen for process feedback. Auto-dismisses after a configurable duration.

View Source

Snackbar Props API

PropTypeDefaultDescription
open*boolean—Controls snackbar visibility.
messagestring—Message text to display.
onClose() => void—Callback when the snackbar closes.
autoHideDurationnumber | null6000Auto-dismiss delay in ms. null to disable.
anchorOrigin{vertical: "top"|"bottom", horizontal: "left"|"center"|"right"}{vertical:'bottom',horizontal:'left'}Screen position of the snackbar.
actionReact.ReactNode—Optional action button.
* Required prop · Props not listed above are passed through to the underlying DOM element.

SpeedDial

When pressed, a floating action button displays 3–6 related actions. Use direction to control expansion orientation.

FAB anchored in corner
Copy
Favorite
Delete
View Source

SpeedDial Props API

PropTypeDefaultDescription
icon*React.ReactNode—Icon displayed in the main FAB trigger.
direction'up' | 'down' | 'left' | 'right''up'Direction in which actions expand.
color'primary' | 'secondary' | 'success''primary'Color of the main FAB.
openboolean—Controls open state (controlled mode).
onOpen() => void—Callback when the dial opens.
onClose() => void—Callback when the dial closes.
* Required prop · Props not listed above are passed through to the underlying DOM element.

SpeedDialAction Props API

PropTypeDefaultDescription
icon*React.ReactNode—Icon to display in the action button.
tooltipTitlestring—Tooltip label shown on hover.
onClick() => void—Click handler for this action.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Skeleton

Placeholder loading state graphics for better perceived performance. Supports text, rectangular, and circular variants.

View Source

Skeleton Props API

PropTypeDefaultDescription
variant'text' | 'rectangular' | 'circular''text'Shape of the skeleton placeholder.
widthnumber | string—Width of the skeleton.
heightnumber | string—Height of the skeleton.
animation'pulse' | 'wave' | false'pulse'Animation style. false disables animation.
classNamestring—Additional CSS classes.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Progress

Circular and linear loading bars for task feedback. Supports determinate (with value) and indeterminate animations.

View Source

Progress Props API

PropTypeDefaultDescription
variant'linear' | 'circular''linear'Shape of the progress indicator.
valuenumber—Progress percentage (0–100). Omit for indeterminate.
color'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info''primary'Indicator color.
sizenumber40Diameter (circular variant only, in px).
thicknessnumber3.6Stroke width (circular variant only).
classNamestring—Additional CSS classes.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Transitions

Smooth entry/exit animations for any content: Fade, Zoom, Slide, and Grow. All wrap children and accept an 'in' boolean prop.

Fade
Zoom
Slide Up
Grow
View Source

Data Components

Table, timeline, pagination, stepper, and tree view primitives cover structured data, chronological events, and step-by-step workflows.

Table

Semantic data table primitives (TableHeader, TableRow, TableHead, TableBody, TableCell) for structured content display.

AssetStatusValue
BitcoinActive$64,231.00
EthereumPending$3,420.50
View Source

Table Props API

PropTypeDefaultDescription
stickyHeaderbooleanfalseIf true, the header row sticks to the top while scrolling.
size'small' | 'medium''medium'Controls cell padding density.
classNamestring—Additional CSS classes.
children*React.ReactNode—TableHeader, TableBody, TableFooter elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Timeline

Chronological visual event paths for logging or history tracking. Supports dot colors, variants, and connector lines.

  • Order Placed
  • Payment Confirmed
  • Shipped
View Source

Timeline Props API

PropTypeDefaultDescription
position'left' | 'right' | 'alternate''right'Content alignment relative to the timeline axis.
classNamestring—Additional CSS classes.
children*React.ReactNode—TimelineItem elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

TimelineDot Props API

PropTypeDefaultDescription
color'primary' | 'secondary' | 'success' | 'error' | 'grey''grey'Color of the dot marker.
variant'filled' | 'outlined''filled'Visual style of the dot.
classNamestring—Additional CSS classes.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Pagination

Page navigation controls for long datasets with active state, previous/next chevrons, and keyboard support.

View Source

Pagination Props API

PropTypeDefaultDescription
countnumber—Total number of pages.
pagenumber—Controlled current page (1-indexed).
defaultPagenumber1Default page (uncontrolled).
onChange(page: number) => void—Callback when page changes.
color'primary' | 'secondary''primary'Active item color.
size'small' | 'medium' | 'large''medium'Link size.
disabledbooleanfalseDisables all navigation.
classNamestring—Additional CSS classes.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Stepper

Step-by-step progress indicator for complex multi-stage workflows. Supports vertical (default) and horizontal orientation.

Security

Verify your identity via MFA.
2

Config

Adjust deployment variables.
3

Deploy

View Source

Stepper Props API

PropTypeDefaultDescription
activeStep*number—Index of the currently active step (0-based).
orientation'horizontal' | 'vertical''vertical'Layout direction of the steps.
alternativeLabelbooleanfalseLabels appear below step icons (horizontal only).
nonLinearbooleanfalseAllows navigating to any step in any order.
classNamestring—Additional CSS classes.
children*React.ReactNode—StepperItem elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

TreeView

Hierarchical folder-like tree structures for nested data navigation. Supports expand/collapse, single/multi select.

  • Applications
  • Documents
View Source

TreeView Props API

PropTypeDefaultDescription
defaultExpandedstring[][]Node IDs expanded by default.
selectedstring | string[]—Controlled selected node(s).
multiSelectbooleanfalseIf true, multiple nodes can be selected.
onNodeSelect(nodeId: string) => void—Callback when a node is selected.
onNodeToggle(nodeId: string) => void—Callback when a node is expanded/collapsed.
classNamestring—Additional CSS classes.
children*React.ReactNode—TreeItem elements.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Transfer List

Shuttle list for moving one or more items between two independent collection sets. Includes basic and enhanced selection with Move All support.

Basic Transfer List

Includes move-selected and move-all actions, matching the classic transfer-list pattern from MUI.

Choices

4 items

Chosen

4 items
View Source

TransferList Props API

PropTypeDefaultDescription
items*Array<{value: string; label: string}>—Complete pool of available items.
valuestring[]—Controlled list of selected (right-side) item values.
defaultValuestring[][]Default selected items (uncontrolled).
onChange(selected: string[]) => void—Callback with updated selected values.
leftTitlestringChoicesTitle of the source (left) list.
rightTitlestringChosenTitle of the destination (right) list.
showMoveAllbooleanfalseShows Move All / Remove All buttons.
showSelectAllbooleanfalseShows Select All checkboxes in list headers.
* Required prop · Props not listed above are passed through to the underlying DOM element.

Component Index

Everything currently available from the package, grouped by purpose.

Basic

Button

Action button with variants, sizes, and loading states.

ButtonGroup

Groups buttons logically with shared borders.

IconButton

Icon action buttons in circular bounds.

ToggleButton

Toggable button inputs serving as complex radios.

Fab

Floating Action Button for primary actions.

Input

Text field with labels, helper text, and validation states.

TextField

Unified input wrapper supporting multiline and select modes.

Textarea

Multi-line input with the same ergonomic API as Input.

Select

Native select wrapper with size and status variants.

Calendar

Date input primitive with label, helper text, and validation states.

Checkbox

Accessible checkbox with optional label and description.

RadioGroup

Single-select option groups with keyboard-friendly semantics.

Switch

Toggle control for boolean settings with labels and descriptions.

Card

Composable surface with header, content, and footer slots.

Badge

Small status indicators for labels and states.

Alert

Informational callout with title and description primitives.

Avatar

User identity component with image and fallback support.

Typography

Standardized text routing primitive.

Link

Navigational anchor with custom underlines.

Chip

Compact display and input token elements.

Rating

Star-rating input component.

Slider

Range slider input component.

Autocomplete

Combobox input with searchable options.

AvatarGroup

Stack multiple avatars together with overlapping offset.

Layout

Box

Polymorphic utility wrapper for flexible styling.

AppBar

Standardized top app bar for branding and navigation.

Toolbar

Content wrapper for headers with consistent alignment.

Container

Responsive layout wrapper for page-level sections.

Grid

Flexible grid utility component for aligned layouts.

Navbar

Composable top navigation structure with brand and links.

Sidebar

Sidebar container with sectioned navigation items.

Drawer

Sliding overlay panel.

Breadcrumbs

Hierarchical navigation path indicators.

Paper

Elevated surfaces translating physical depths.

List

Robust continuous and interactive item systems.

BottomNavigation

Mobile sticky navigation controls.

Stack

Flexbox column/row wrapper.

Divider

Horizontal and vertical separation lines.

Masonry

Packs elements into an optimal vertical stack without gaps.

Hidden

Responsive utility for manual breakpoint visibility control.

Interactive

Modal

Layered dialog for confirmation and focused tasks.

Dialog

Higher-level modal abstraction for standard dialog layouts.

Dropdown

Compact action menu for contextual controls.

Menu

Dedicated dropdown menu for action lists.

Tabs

Segment content into interactive tabbed views.

Accordion

Progressive disclosure UI for grouped content.

Tooltip

Hover/focus helper content with placement options.

Backdrop

Dimming overlays for focused interactions.

Toast

Transient system feedback via toast notifications.

Snackbar

Global-level transient notifications for user feedback.

SpeedDial

Expanding menu attached to a FAB.

Skeleton

Placeholder loading state graphics.

Progress

Circular and linear loading bars.

Transitions

Parity animation wrappers: Fade, Zoom, Slide, Grow.

Data

Table

Semantic data table primitives for structured content.

Timeline

Chronological visual event paths.

Pagination

Page navigation controls for long datasets.

Stepper

Step-by-step progress indicator with current state.

TransferList

Move one or more items between lists with selectable transfer actions.

TreeView

Hierarchical folder-like tree structures.