fg-design / docs
Components, in context
Preview the library’s component families and the usage patterns they are designed to support.
Core
Core
Typography, actions, inputs, and app-level presentation state.
Display, Heading, Text, Caption, LinkText
A semantic type system for product and marketing interfaces.
A deliberate type hierarchy
Body copy stays readable while headings carry structure.
npm install fg-design
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.
Dialogs, menus, and tooltips can stay inside a scoped theme container.
Forms
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.
Supports local, async, single, multi, and creatable values.
CreatableAutocomplete, CreatableMultiAutocomplete
Search, select, and create values in one control.
Supports local, async, single, multi, and creatable values.
DatePicker, DateTimePicker, MonthPicker
Calendar and time controls with stable string values.
FormRadio, FormCheckbox, FormTextarea
Form-aware choice and long-text fields.
Feedback & overlays
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.
- Password is long enough
- Add a symbol
Tooltip
Accessible contextual hints on every side.
<Tooltip>…</Tooltip>
Composition sample — the package provides the keyboard, focus, and portal behavior.
DropdownMenu
Actions, submenus, separators, checkbox items, and radio items.
<DropdownMenu>…</DropdownMenu>
Composition sample — the package provides the keyboard, focus, and portal behavior.
Modal
Composable dialogs from small confirmations to full-screen flows.
<Modal>…</Modal>
Composition sample — the package provides the keyboard, focus, and portal behavior.
Toaster, toast
Application-wide transient notifications.
<Toaster>…</Toaster>
Composition sample — the package provides the keyboard, focus, and portal behavior.
Command
Command palette primitives with search, groups, shortcuts, and dialogs.
<Command>…</Command>
Composition sample — the package provides the keyboard, focus, and portal behavior.
Data & loading
Data & loading
Dense information, metrics, progress, and responsive loading states.
DataGrid
Sorting, pagination, selection, row actions, editing, resizing, and totals.
Component | Group | Status |
|---|---|---|
Stable | ||
Stable |
Table
Low-level table primitives for bespoke structures.
Semantic table primitives support bespoke headers, rows, cells, captions, and footers.
StatCard
A metric, optional delta, and icon in one compact card.
Components
List, ListItem
Divided or spaced vertical collections.
- Composable primitives
- Typed props
- Token-driven styles
Progress, LinearProgress
Determinate progress and indeterminate background work.
Spinner, Skeleton
Blocked-area and shape-preserving loading states.
Loading components preserve layout while work completes.
ImageCarousel
Main media, thumbnails, autoplay, and previous/next controls.
Main media, thumbnails, autoplay, and navigation controls.