Why Sigil?
Every project needs UI primitives. Sigil provides accessible web components that work natively anywhere HTML is rendered—no framework required.
<!-- Before — roll your own button with ARIA -->
<button class="btn btn-primary" role="button" aria-pressed="false" tabindex="0">
<span class="btn-spinner" aria-hidden="true"></span>
Save
</button>
<!-- After — Sigil -->
<sg-button variant="primary" loading>Save</sg-button>| Feature | Sigil | Shoelace | Material Web |
|---|---|---|---|
| Bundle size | 95.8 KB | ~145 kB | ~200 kB |
| Built with | Craft | Lit | Lit |
| Accessible | WCAG AA | WCAG AA | WCAG AA |
| Framework agnostic |
Use Sigil when you want accessible web components that match the Vielzeug design system without a heavy framework dependency.
Consider Shoelace or Material Web if your team is already standardized on those ecosystems and you need their established component catalogs.
Installation
pnpm add @vielzeug/sigilnpm install @vielzeug/sigilyarn add @vielzeug/sigilQuick Start
// 1. Import global styles once
import '@vielzeug/sigil/styles';
// 2. Register only the elements you need
import '@vielzeug/sigil/button';
import '@vielzeug/sigil/input';
import '@vielzeug/sigil/card';<sg-button variant="solid" color="primary">Save</sg-button>
<sg-input label="Email" type="email" required></sg-input>
<sg-card padding="lg">
<span slot="header">Account</span>
<p>Card content goes here.</p>
</sg-card>// Or register everything at once
import '@vielzeug/sigil/styles';
import '@vielzeug/sigil';CDN / Vanilla HTML
Use the self-contained IIFE bundle to load Sigil directly from a CDN in any HTML page — no build step required:
<!-- 1. Styles -->
<link rel="stylesheet" href="https://unpkg.com/@vielzeug/sigil/dist/styles/styles.css" />
<!-- 2. All components (IIFE — registers global Sigil namespace) -->
<script src="https://unpkg.com/@vielzeug/sigil/dist/sigil.iife.js"></script>For bundler-based projects that still want a CDN URL, use the ESM bundle via an import map:
<script type="importmap">
{
"imports": {
"@vielzeug/sigil": "https://esm.sh/@vielzeug/sigil",
"@vielzeug/sigil/button": "https://esm.sh/@vielzeug/sigil/button",
"@vielzeug/sigil/input": "https://esm.sh/@vielzeug/sigil/input"
}
}
</script>
<script type="module">
import '@vielzeug/sigil/button';
import '@vielzeug/sigil/input';
</script>Package Entry Points
| Import | Purpose |
|---|---|
@vielzeug/sigil | Register all published components |
@vielzeug/sigil/styles | Global tokens and shared component styles |
@vielzeug/sigil/types | Shared TypeScript types |
Component registration happens through side-effect imports such as @vielzeug/sigil/button and @vielzeug/sigil/dialog.
Headless widget controllers (createTextField, createListControl, createOverlayControl, and others) are exported directly from @vielzeug/sigil alongside component types.
Components
Content: sg-avatar, sg-avatar-group, sg-breadcrumb, sg-card, sg-carousel, sg-carousel-slide, sg-icon, sg-pagination, sg-separator, sg-table, sg-text
Disclosure: sg-accordion, sg-accordion-item, sg-tabs, sg-tab-item, sg-tab-panel
Feedback: sg-alert, sg-async, sg-badge, sg-chip, sg-password-strength, sg-progress, sg-skeleton, sg-toast
Inputs: sg-button, sg-button-group, sg-calendar, sg-checkbox, sg-checkbox-group, sg-column, sg-combobox, sg-datagrid, sg-date-picker, sg-file-input, sg-form, sg-input, sg-number-input, sg-otp-input, sg-radio, sg-radio-group, sg-rating, sg-select, sg-slider, sg-switch, sg-textarea, sg-time-picker
Layout: sg-box, sg-grid, sg-grid-item, sg-navbar, sg-sidebar
Overlay: sg-dialog, sg-drawer, sg-menu, sg-popover, sg-tooltip
Features
- Accessible — keyboard navigation, ARIA wiring, and focus management across interactive components
- Themeable — global tokens plus component-level CSS custom properties
- Framework agnostic — works anywhere HTML can be rendered
- Tree-shakeable — import only the component entry points you register
- Comprehensive surface — inputs, content, disclosure, feedback, layout, and overlay primitives
- Zero runtime deps — 95.8 KB gzipped
Prerequisites
- Browser runtime with Custom Elements support.
- Import
@vielzeug/sigil/stylesbefore rendering components. - For SSR, render placeholders server-side and hydrate components only on the client.