@boxy-design/angular

Boxy for Angular 22: 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/angular

Setup

• Add node_modules/@boxy-design/angular/styles.css to the styles array in angular.json (or @import it from your global stylesheet).
• Add <svg bxIconSprite></svg> once in the root template.
• Import what you use into each standalone component's imports (BxButton, BxField, ...), or ...BOXY while prototyping.
• Add provideBoxyBehaviors() to the application providers to make menus, tooltips, combobox, calendar, kanban and the other interactive widgets respond.

Example

import { BxButton, BxField, BxInput } from "@boxy-design/angular";

@Component({
  imports: [BxButton, BxField, BxInput],
  template: `
    <div bxField label="Service name" help="Lowercase, hyphens only.">
      <input bxInput />
    </div>
    <button bxButton variant="primary">Deploy</button>
  `
})
export class DeployForm {}

Notes

• Directives sit on the native element (<button bxButton>), so the DOM is exactly the design system's markup. Components with internal structure (Icon, Field, Callout) are components on a native element too.
• Tabs: <ng-container bxTabs defaultValue="a">. Modal: <bx-modal [(open)]="open" title="..."> with <ng-container bxModalFooter>.

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