@boxy-design/vue

Boxy for Vue 3.5: 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/vue

Setup

• Import the stylesheet once in main.ts: import "@boxy-design/vue/styles.css".
• Render <IconSprite /> once in App.vue.
• Components are named exports (Button, Field, Input, ...); import the ones you use and put them in a template.
• Render <Behaviors /> once in App.vue (or call useBehaviors()) to make menus, tooltips, combobox, calendar, kanban and the other interactive widgets respond.

Example

<script setup lang="ts">
import { Button, Field, Input } from "@boxy-design/vue";
</script>

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

Notes

• Tabs takes v-model, Modal takes v-model:open and a #footer slot.
• useBoxy() returns the current theme, density and mode as a ref plus setters.

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