@boxy-design/react

Boxy for React 19: a sharp-edged, zero-radius design system. Hairline structure, a disciplined neutral palette, and square everything.

Generated, not hand-ported. This package is emitted from the same component spec as the Boxy stylesheet and is tested against 826 conformance cases, so the markup it renders is identical to the design system's. How that works.

Install

npm install @boxy-design/react

Setup

• Import the stylesheet once at the app root: import "@boxy-design/react/styles.css".
• Render <IconSprite /> once near the root so <Icon name="..." /> resolves.
• Optional: <ThemeScript /> in <head> (SSR) and useBoxy() for theme, density and mode.
• Render <Behaviors /> once near the root to make menus, tooltips, combobox, calendar, kanban and the other interactive widgets respond. Tabs, Modal and Drawer are components and need nothing.

Example

import { Button, Field, Input } from "@boxy-design/react";

<Field label="Service name" help="Lowercase, hyphens only.">
  <Input />
</Field>
<Button variant="primary">Deploy</Button>

Notes

• Field wires id, aria-describedby and aria-invalid into the control inside it; do not set them by hand.
• Extend with className, never by overriding bx-* classes. buttonClass() and the other *Class() builders give the same classes for a non-Boxy element.

What is included

Icon, Button, ButtonGroup, Label, Field, Input, Textarea, Select, Choice, Checkbox, Radio, Toggle, Tag, Callout, Card, CardHead, CardBody, CardFoot, TableWrap, Table, Th, Td, Spinner, Tabs, TabList, Tab, TabPanel, Dialog, DialogHeader, DialogTitle, DialogBody, DialogFooter, Modal, Stack, Cluster, Grid, AutoGrid, Split, Collapse, Container, Rail, Section, GridBackground, DotBackground, Ticks, LabelText, Mono, Num, ScreenReaderText, Kbd, Mark, Code, Caret, Prose, Quote, Cite, List, OrderedList, ListItem, DescriptionList, Status, Skeleton, Empty, EmptyGlyph, Progress, ProgressRow, Meter, MeterCell, StepBar, StepBarCell, Avatar, AvatarGroup, Timeline, TimelineItem, TimelineTime, TimelineTitle, TimelineBody, Breadcrumb, BreadcrumbMore, Tree, TreeHeading, TreeLink, TreeSummary, TreeCount, Toc, TocLink, Accordion, AccordionNumber, AccordionBody, CodeBlock, CodeBlockHead, CodeBlockSpacer, CodeBlockButton, CodeBlockFoot, CodeLines, CodeLine, Token, Banner, Chart, ChartLegend, ChartKey, ChartTip, Dropzone, DropzoneGlyph, UploadList, UploadItem, UploadType, UploadName, UploadMeta, Sparkline, UptimeStrip, HelpText, SearchField, DateField, Slider, SliderScale, SliderTicks, Stepper, Segmented, Swatch, SwatchButton, ColorPicker, PickerField, PickerHue, PickerRow, PickerSwatches, PickerContrast, Combo, ComboToggle, Listbox, ListboxGroup, ListboxEmpty, ListboxOption, OptionMeta, MultiSelect, MultiInput, MultiClear, Calendar, RangeCalendar, CalendarFoot, RangePicker, RangePresets, Menu, MenuEntry, MenuItem, MenuLink, MenuItemCheckbox, MenuItemRadio, MenuIcon, MenuHint, MenuLabel, MenuSeparator, MenuHeader, MenuFooter, Popover, PopoverHead, PopoverBody, PopoverFoot, FloatingPanel, DrawerPanel, DrawerHead, DrawerBody, DrawerFoot, Drawer, ToastStack, Toast, ToastBody, Tooltip, PaletteSearch, PaletteList, PaletteGroup, PaletteLink, PaletteAction, PaletteMeta, PaletteEmpty, PaletteFoot, TagRemove, Thread, Message, MessageWho, MessageMeta, MessageBody, MessageActions, Thought, ThoughtBody, ToolList, Tool, ToolStatus, ToolName, ToolArgs, ToolDuration, ToolBody, ToolSummary, Approval, ApprovalHead, ApprovalBody, ApprovalFoot, Composer, ComposerFiles, ComposerBar, Kanban, KanbanColumn, KanbanHead, KanbanCount, KanbanList, KanbanSlot, KanbanCard, KanbanCardTitle, KanbanCardMeta, KanbanPriority, Panes, Pane, PaneHead, Resizer, BellButton, BellCount, Inbox, InboxHead, InboxTabs, InboxList, InboxDay, InboxFoot, Note, NoteIcon, NoteText, NoteActions, NoteTime, DataGrid, DataGridBar.

More components are added to the spec and arrive in every package at once. Until then, build the rest from the stylesheet classes the same way the docs do: Boxy component reference.

Versioning

Every @boxy-design/* package and the boxy-design CLI share one version number, and a release publishes them together. Keep them on the same version.

Links

Docs · Source · Other frameworks · MIT