@boxy-design/preact

Boxy for Preact 11: 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/preact

Setup

• Import the stylesheet once: import "@boxy-design/preact/styles.css".
• Render <IconSprite /> once near the root.
• Render <Behaviors /> once near the root to make menus, tooltips, combobox, calendar, kanban and the other interactive widgets respond.

Example

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

<Field label="Service name">
  <Input />
</Field>
<Button variant="primary">Deploy</Button>

Notes

• Native Preact: class, not className, and no preact/compat needed.

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