Build, audit, and ship accessible UI with confidence
Install and start using components right away
Install Zabi Components using npm:
npm install zabi-componentsImport and use components in your Svelte 5 app:
import { Button, Card, CardHeader, CardContent, Input } from "zabi-components";
let name = $state("");
<Card>
<CardHeader title="Welcome" />
<CardContent>
<Input
label="Your Name"
value={name}
oninput={(e) => name = e.target.value}
/>
<Button onclick={() => console.log("Hello!")}>
Say Hello
</Button>
</CardContent>
</Card>Run the audit framework and remediation workflow end-to-end
Use these files to run repeatable audits, track issues, and publish scorecards.
docs/AUDIT_RUNBOOK.md
docs/AUDIT_SCORECARD_TEMPLATE.md
docs/AUDIT_SCORECARD_2026-03-15.md
docs/DESIGN_SYSTEM_REMEDIATION_TRACKER.mdRun these checks before publishing updates to the component library.
npm run check
npm run check:tokens
npm run build
npm run build-storybookLatest remediation cycle completed all planned phases, including accessibility, token compliance, state coverage, and Storybook/doc updates.
Health Score
84 / 100
Validation
`check`, `build`, and Storybook build passing
Built with Svelte 5 runes and modern patterns
Full TypeScript support with proper type definitions
WCAG compliant with keyboard navigation and screen reader support
Easy theming with CSS custom properties
Tree-shakeable with minimal bundle impact
Tweak colors and type with CSS variables—no need to fork everything
Explore different button styles and variants
Zabi Components provides multiple button variants for different use cases:
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="danger">Danger</Button>Use icon-only buttons for compact actions and toolbars
Provide an accessible label for icon-only buttons.
<IconButton label="Favorite">
<Heart />
</IconButton>Browse the interactive showcase: category sidebar, live demos, props tables, and shareable URLs such as /components/SidebarNavigation.
Check out our GitHub repository for help
Questions? Ask on GitHub — we're happy to help.
© 2026 Zabi Components. MIT License.