Axie UIReact primitives
Build calm product screens faster.
Axie UI is a tactile component system for forms, settings, dashboards, and internal tools that need to feel personal without getting noisy.
Workspace
North Pier Ops
Billing, review, and support surfaces in one visual language.
Collected$8.4k
Queued18
Blocked3
Merchant review
Rate table changed by 4.2%.
Ready
Contract sync
Missing approver from finance.
Hold
Built for real product surfaces
Use the same primitives for focused forms, review queues, settings panels, and status-heavy dashboards.
Start
Start small with a primitive, then move up to recipes and full screens when the product needs more structure.
01Install the libraryAdd the package and stylesheet once, then start importing primitives.02Pick a componentUse focused building blocks for inputs, feedback, overlays, navigation, and data display.03Copy a sampleStart from composed surfaces when you need a full settings screen, dashboard, or mobile view.
Quick start
Install the package, import the stylesheet, and use the primitives anywhere in your app.
code
pnpm add @axie/uiimport "@axie/ui/styles.css";import { Button, Field, Input } from "@axie/ui";Tokens firstColors, spacing, radius, and motion are CSS variables.
Copyable codeEvery page keeps preview, usage, and API notes close together.
App-ready statesControls include the focus, disabled, error, and motion details you need.
Components
36 primitives for inputs, overlays, feedback, navigation, and dense app layouts.
ButtonFormsA tactile action primitive with solid, soft, outline, ghost, danger, and icon treatments.InputFormsA dense input primitive with Axie focus, disabled, placeholder, and invalid states.AutocompleteFormsA combobox input for filtering and selecting from suggested options.Input OTPFormsA compact one-time code input with copy-paste support through a hidden native input.FieldFormsA form wrapper for labels, helper copy, error copy, inputs, and textareas.CheckboxFormsA native checkbox with Axie sizing, color, label, and description patterns.SwitchFormsA compact native switch for binary settings and panel preferences.Segmented ControlFormsA compact control for switching between a small set of mutually exclusive choices.TabsNavigationA small tab primitive for previews, settings panels, and compact docs surfaces.AccordionData DisplayA disclosure primitive for progressive settings, FAQs, and compact help.Command MenuNavigationA keyboard-friendly command palette for docs search, navigation, and app commands.DialogOverlaysA centered modal for confirmation and compact focused tasks.SelectFormsA styled listbox select with Axie trigger, menu, option descriptions, and keyboard navigation.Radio GroupFormsA radio group for settings where every option needs a short explanation.CardData DisplayLow-elevation containers for individual repeated items or genuine tool surfaces.AlertFeedbackInline feedback for state changes, warnings, and validation summaries.BadgeFeedbackSmall semantic labels for status, categories, and compact metadata.AvatarData DisplayA rounded-square avatar with initials fallback and optional presence status.BreadcrumbNavigationA compact navigation trail for docs, settings, and nested app pages.PopoverOverlaysA lightweight floating surface for compact actions and contextual details.ProgressFeedbackA stable progress bar for budget pace, onboarding, and background work.SliderFormsA native range input for compact numeric preferences and settings.PaginationNavigationA small pagination primitive for tables, ledgers, and search results.StepperData DisplayA compact progress list for setup flows, review queues, and staged forms.TableData DisplayComposable table pieces for compact API references, ledgers, and settings matrices.List RowData DisplayA dense row primitive for ledgers, settings lists, feeds, and command rows.Empty StateFeedbackA composed empty state with one visual signal and one clear action.SkeletonFeedbackA layout-matching loading primitive with a subtle shimmer.KbdNavigationA small keyboard hint primitive for command surfaces and docs.Mobile DockNavigationA floating mobile navigation dock with a moving active indicator and raised center action.Code BlockData DisplayA reusable code shell with copy action, header label, and inline controls.Bottom SheetOverlaysA mobile-first modal surface for dense forms and focused decisions.TooltipOverlaysA lightweight tooltip for icon buttons and compact controls.ToastFeedbackA compact notification surface for saved states, sync updates, and warnings.SeparatorData DisplayA simple separator for lists, panels, and docs layouts.StatData DisplayA stable readout for dashboards and compact summary bands.
Samples
Recipes are smaller product patterns. Templates are larger screens that show spacing, hierarchy, and composition.
Recipes
Patterns you can paste into product work
Twelve focused combinations for settings panels, queues, onboarding, upload flows, and empty states.
Templates
Full-page samples with real layout pressure
Eight larger screens for dashboards, billing portals, support inboxes, project boards, and mobile finance.