Announcing bigdesign-svelte

We just published @abeedoo/bigdesign-svelte — a Svelte 5 port of BigCommerce's BigDesign component library. 52 components, zero dependencies, MIT licensed.

Playground: bigdesign-svelte.abeedoo.com
npm: @abeedoo/bigdesign-svelte
GitHub: abeedoolabs/bigdesign-svelte

Why

If you're building a BigCommerce app with Svelte, you need your UI to match the BigCommerce admin panel. BigDesign is BigCommerce's official design system — but it's React-only. We needed it in Svelte for a couple of production apps, so we ported it.

What's In the Box

52 components across 8 categories:

Layout — Box, Flex, Grid, Panel, Collapse, AccordionPanel
Actions — Button, ButtonGroup, Link, Dropdown
Forms — Input, Textarea, Select, MultiSelect, Checkbox, Radio, Switch, Toggle, Counter, Search, Datepicker, FileUploader, Fieldset, Form
Data Display — Typography (H0–H4, Text, Small), HR, Badge, Chip, Lozenge, List, Table, StatefulTable
Feedback — Alert, InlineMessage, Message, StatusMessage, ProgressBar, ProgressCircle
Navigation — Tabs, PillTabs, Stepper, OffsetPagination, StatelessPagination
Overlays — Modal, Tooltip, Popover
Specialized — AnchorNav, Timepicker, Tree, StatefulTree, TableNext, Worksheet, FeatureSet

Quick Start

npm install @abeedoo/bigdesign-svelte

Import the theme in your root layout:

<!-- +layout.svelte -->
<script>
  import '@abeedoo/bigdesign-svelte/theme';
</script>

Use components:

<script>
  import { Button, Panel, Input, Alert } from '@abeedoo/bigdesign-svelte';
</script>

<Panel header="Settings">
  <Input label="Store name" placeholder="My Store" />
  <Button variant="primary">Save</Button>
</Panel>

How It's Built

The port matches BigDesign's visual appearance, prop names, and accessibility while using Svelte 5 idioms:

React BigDesign	Svelte BigDesign
styled-components (CSS-in-JS)	Scoped CSS + CSS custom properties
`{children}` / render props	Svelte 5 snippets
`useState` / `useRef`	`$state` / `$derived` runes
`onChange` callbacks	`$bindable()` runes

All design tokens are CSS custom properties with a --bd- prefix. No runtime CSS-in-JS. No Tailwind. Just CSS variables in :root and scoped styles in each component. This means the theme loads in one CSS import and everything just works.

Component names are 1:1 with React BigDesign — StatefulTable is StatefulTable, not DataGrid or SmartTable. If you're reading BigCommerce's docs, the same component names apply.

LLMs.txt

The package ships with an llms.txt manifest — a structured document describing all 52 components, their props, types, defaults, and usage examples. It follows the llms.txt standard and is designed for AI agents that can't fetch external URLs from sandboxed environments. Point your agent at the file and it can generate valid BigDesign Svelte components without hallucinating prop names.

Status

v0.3.1. Used in production in two BigCommerce apps. The component set covers everything we've needed so far. If you're building BigCommerce integrations with Svelte and you've been rolling your own components or wrapping React in iframes, give it a try.

Not affiliated with, endorsed by, or maintained by BigCommerce. BigDesign is a trademark of BigCommerce.