React component library

fg-design

A soft, modern component system for building accessible React products with consistent tokens, themes, and interaction patterns.

View on npm Docs Source on GitHub

npm install fg-design

System principles

One visual language, flexible products

Token driven

Colors, spacing, radii, shadows, motion, and typography are expressed as reusable design tokens.

Accessible by default

Radix foundations, semantic markup, keyboard behavior, and an optional larger-interface mode are built in.

Themeable

Override tokens to adapt the system to a product instead of copying or forking components.

About

Designed for real product work

fg-design is the component library behind my recent products. It packages accessible Radix UI primitives, a Tailwind-based token system, and the higher-level controls I repeatedly need in production — from forms and dialogs to data grids, navigation, and feedback states.

The library is published on npm and documented component by component. This page is the public reference: browse the full catalog, see what each primitive is for, and jump to the package or source when you are ready to use it.

Reference

Component catalog

Import any component from fg-design, then import fg-design/styles once at your application entry.

Core

Typography, actions, inputs, and app-level presentation state.

Display, Heading, Text, Caption, LinkText

A semantic type system for product and marketing interfaces.

Button

Primary, outline, ghost, danger, and link actions with loading state.

Input, Textarea, TextareaAuto

Labelled text fields with errors, hints, adornments, and auto-growing copy.

NumberInput, MoneyInput

Formatted numeric and currency entry.

SearchBar

Debounced or button-driven search input.

Select

Composable Radix select primitives for custom selection interfaces.

Checkbox, Toggle, RadioGroup

Boolean and single-choice controls, including indeterminate state.

Badge, Avatar

Compact status labels and user identity.

ThemeProvider, AccessibleModeProvider

Light/dark themes and larger, easier-to-target accessible UI.

PortalContainerProvider

Keeps overlays inside a scoped theme container.

Forms

Production-ready controls with consistent labels, validation, and value contracts.

FormSelect

Single selection from a short, fixed option list.

Autocomplete, MultiAutocomplete

Searchable local or asynchronous option picking.

CreatableAutocomplete, CreatableMultiAutocomplete

Search, select, and create values in one control.

DatePicker, DateTimePicker, MonthPicker

Calendar and time controls with stable string values.

FormRadio, FormCheckbox, FormTextarea

Form-aware choice and long-text fields.

Responsive structure from small compositions to an application shell.

Card

Header, content, and footer primitives for grouped content.

Stack, Grid, Divider

Token-aligned flow, grid, and separation utilities.

Header

A flexible top-bar layout primitive.

Sidebar

Collapsible navigation, nested groups, icon rail, and mobile drawer.

Breadcrumb

Collapsible navigation trails with custom separators.

Tabs

Line, pill, and solid-box tab treatments.

Feedback & overlays

Status, validation, menus, dialogs, and transient messaging.

Banner

Persistent info, success, warning, and danger callouts.

ValidationList, ValidationItem

Live pass/fail feedback for requirements.

Tooltip

Accessible contextual hints on every side.

DropdownMenu

Actions, submenus, separators, checkbox items, and radio items.

Modal

Composable dialogs from small confirmations to full-screen flows.

Toaster, toast

Application-wide transient notifications.

Command

Command palette primitives with search, groups, shortcuts, and dialogs.

Data & loading

Dense information, metrics, progress, and responsive loading states.

DataGrid

Sorting, pagination, selection, row actions, editing, resizing, and totals.

Table

Low-level table primitives for bespoke structures.

StatCard

A metric, optional delta, and icon in one compact card.

List, ListItem

Divided or spaced vertical collections.

Progress, LinearProgress

Determinate progress and indeterminate background work.

Spinner, Skeleton

Blocked-area and shape-preserving loading states.

ImageCarousel

Main media, thumbnails, autoplay, and previous/next controls.