varbyte-ds

v0.1.0

Published

20 days ago

Native Web Components design system — zero dependencies, no build step. 29 components with dark mode, form association, and CSS custom properties.

0High
0Medium
0Low

varbytedev

web-components custom-elements design-system shadow-dom ui-components no-framework zero-dependencies dark-mode css-custom-properties form-associated

VarByte DS

A native Web Components design system — no frameworks, no build step, no dependencies. Just include the JavaScript and use the components in any HTML page.

Based on Bearnie UI, ported to Custom Elements with Shadow DOM.

Features

🧩 29 components — buttons, forms, dialogs, tables, and more
🌗 Dark mode — automatic via prefers-color-scheme, or toggle with .dark class on <html>
🎨 CSS custom properties — all styles use --vb-* variables, easy to customize
📦 Zero dependencies — pure ES modules, no build step required
🧱 Tree-shakeable — import only the components you need

Quick Start

All components

<script type="module" src="./src/index.js"></script>

Individual components

Each component auto-injects the theme when imported. Just import what you need:

<script type="module" src="./src/components/button.js"></script>
<script type="module" src="./src/components/card.js"></script>

From JavaScript

import './src/index.js'; // all components
// or
import './src/components/button.js'; // just button

Dark Mode

// Toggle dark mode
document.documentElement.classList.toggle('dark');

// Force light mode (ignores system preference)
document.documentElement.classList.add('light');

Customization

Override any --vb-* variable on :root:

:root {
  --vb-primary: oklch(0.6 0.2 260);
  --vb-radius: 0.25rem;
}

Components

Accordion

<vb-accordion>
  <vb-accordion-item>
    <vb-accordion-trigger>Is it accessible?</vb-accordion-trigger>
    <vb-accordion-content>Yes. It follows WAI-ARIA patterns.</vb-accordion-content>
  </vb-accordion-item>
  <vb-accordion-item>
    <vb-accordion-trigger>Is it styled?</vb-accordion-trigger>
    <vb-accordion-content>Yes. It uses CSS custom properties.</vb-accordion-content>
  </vb-accordion-item>
</vb-accordion>

File: src/components/accordion.js Elements: vb-accordion, vb-accordion-item, vb-accordion-trigger, vb-accordion-content

Alert

<vb-alert>
  <vb-alert-title>Heads up!</vb-alert-title>
  <vb-alert-description>You can add components to your app.</vb-alert-description>
</vb-alert>

<vb-alert variant="destructive">
  <vb-alert-title>Error</vb-alert-title>
  <vb-alert-description>Something went wrong.</vb-alert-description>
</vb-alert>

File: src/components/alert.js Elements: vb-alert, vb-alert-title, vb-alert-description Attributes: variant — default | destructive

Avatar

<vb-avatar>
  <vb-avatar-image src="https://example.com/photo.jpg" alt="User"></vb-avatar-image>
  <vb-avatar-fallback>JD</vb-avatar-fallback>
</vb-avatar>

<vb-avatar size="lg">
  <vb-avatar-fallback>AB</vb-avatar-fallback>
</vb-avatar>

File: src/components/avatar.js Elements: vb-avatar, vb-avatar-image, vb-avatar-fallback Attributes: size — sm | default | lg

Badge

<vb-badge>Default</vb-badge>
<vb-badge variant="secondary">Secondary</vb-badge>
<vb-badge variant="outline">Outline</vb-badge>
<vb-badge variant="destructive">Destructive</vb-badge>

File: src/components/badge.js Elements: vb-badge Attributes: variant — default | secondary | outline | destructive

Breadcrumb

<vb-breadcrumb>
  <vb-breadcrumb-list>
    <vb-breadcrumb-item>
      <vb-breadcrumb-link href="/">Home</vb-breadcrumb-link>
    </vb-breadcrumb-item>
    <vb-breadcrumb-separator></vb-breadcrumb-separator>
    <vb-breadcrumb-item>
      <vb-breadcrumb-link href="/docs">Docs</vb-breadcrumb-link>
    </vb-breadcrumb-item>
    <vb-breadcrumb-separator></vb-breadcrumb-separator>
    <vb-breadcrumb-item>
      <vb-breadcrumb-page>Current Page</vb-breadcrumb-page>
    </vb-breadcrumb-item>
  </vb-breadcrumb-list>
</vb-breadcrumb>

File: src/components/breadcrumb.js Elements: vb-breadcrumb, vb-breadcrumb-list, vb-breadcrumb-item, vb-breadcrumb-link, vb-breadcrumb-page, vb-breadcrumb-separator

Button

<vb-button>Default</vb-button>
<vb-button variant="secondary">Secondary</vb-button>
<vb-button variant="outline">Outline</vb-button>
<vb-button variant="ghost">Ghost</vb-button>
<vb-button variant="destructive">Destructive</vb-button>
<vb-button variant="link">Link</vb-button>
<vb-button size="sm">Small</vb-button>
<vb-button size="lg">Large</vb-button>
<vb-button disabled>Disabled</vb-button>

Card

<vb-card>
  <vb-card-header>
    <vb-card-title>Card Title</vb-card-title>
    <vb-card-description>Card description goes here.</vb-card-description>
  </vb-card-header>
  <vb-card-content>
    <p>Card content.</p>
  </vb-card-content>
  <vb-card-footer>
    <vb-button>Action</vb-button>
  </vb-card-footer>
</vb-card>

File: src/components/card.js Elements: vb-card, vb-card-header, vb-card-title, vb-card-description, vb-card-content, vb-card-footer

Checkbox

<label style="display:flex;align-items:center;gap:0.5rem">
  <vb-checkbox></vb-checkbox>
  Accept terms
</label>

<vb-checkbox checked></vb-checkbox>
<vb-checkbox disabled></vb-checkbox>

File: src/components/checkbox.js Elements: vb-checkbox Attributes: checked · disabled Events: change — detail: { checked: boolean }

Dialog

<vb-dialog>
  <vb-dialog-trigger>
    <vb-button>Open Dialog</vb-button>
  </vb-dialog-trigger>
  <vb-dialog-content>
    <vb-dialog-header>
      <vb-dialog-title>Are you sure?</vb-dialog-title>
      <vb-dialog-description>This action cannot be undone.</vb-dialog-description>
    </vb-dialog-header>
    <vb-dialog-footer>
      <vb-dialog-close><vb-button variant="outline">Cancel</vb-button></vb-dialog-close>
      <vb-button>Confirm</vb-button>
    </vb-dialog-footer>
  </vb-dialog-content>
</vb-dialog>

File: src/components/dialog.js Elements: vb-dialog, vb-dialog-trigger, vb-dialog-content, vb-dialog-header, vb-dialog-title, vb-dialog-description, vb-dialog-footer, vb-dialog-close

Dropdown Menu

<vb-dropdown-menu>
  <vb-dropdown-trigger>
    <vb-button variant="outline">Open Menu</vb-button>
  </vb-dropdown-trigger>
  <vb-dropdown-content>
    <vb-dropdown-label>My Account</vb-dropdown-label>
    <vb-dropdown-separator></vb-dropdown-separator>
    <vb-dropdown-item>Profile</vb-dropdown-item>
    <vb-dropdown-item>Settings</vb-dropdown-item>
    <vb-dropdown-separator></vb-dropdown-separator>
    <vb-dropdown-item destructive>Log out</vb-dropdown-item>
  </vb-dropdown-content>
</vb-dropdown-menu>

File: src/components/dropdown-menu.js Elements: vb-dropdown-menu, vb-dropdown-trigger, vb-dropdown-content, vb-dropdown-item, vb-dropdown-separator, vb-dropdown-label Attributes (content): align — start | center | end Attributes (item): destructive · disabled

Input

<vb-input placeholder="Email"></vb-input>
<vb-input type="password" placeholder="Password"></vb-input>
<vb-input disabled placeholder="Disabled"></vb-input>

File: src/components/input.js Elements: vb-input Attributes: type · placeholder · value · name · disabled

Input Group

<vb-input-group>
  <vb-input-group-addon>https://</vb-input-group-addon>
  <vb-input-group-input placeholder="example.com"></vb-input-group-input>
</vb-input-group>

<vb-input-group>
  <vb-input-group-addon>@</vb-input-group-addon>
  <vb-input-group-input placeholder="username"></vb-input-group-input>
  <vb-input-group-addon align="end">.com</vb-input-group-addon>
</vb-input-group>

File: src/components/input-group.js Elements: vb-input-group, vb-input-group-addon, vb-input-group-input Attributes (addon): align — start | end

Kbd

<span>Press <vb-kbd>⌘</vb-kbd> + <vb-kbd>K</vb-kbd> to search</span>

File: src/components/kbd.js Elements: vb-kbd

Label & Textarea

<vb-label>Your message</vb-label>
<vb-textarea placeholder="Type here..." rows="4"></vb-textarea>

File: src/components/form.js Elements: vb-label, vb-textarea

Pagination

<vb-pagination>
  <vb-pagination-content>
    <vb-pagination-prev href="#"></vb-pagination-prev>
    <vb-pagination-item href="#">1</vb-pagination-item>
    <vb-pagination-item href="#" active>2</vb-pagination-item>
    <vb-pagination-item href="#">3</vb-pagination-item>
    <vb-pagination-ellipsis></vb-pagination-ellipsis>
    <vb-pagination-item href="#">10</vb-pagination-item>
    <vb-pagination-next href="#"></vb-pagination-next>
  </vb-pagination-content>
</vb-pagination>

File: src/components/pagination.js Elements: vb-pagination, vb-pagination-content, vb-pagination-item, vb-pagination-prev, vb-pagination-next, vb-pagination-ellipsis Attributes (item): href · active

Progress

<vb-progress value="60"></vb-progress>
<vb-progress value="30" max="50"></vb-progress>

File: src/components/progress.js Elements: vb-progress Attributes: value · max

Radio Group

<vb-radio-group name="plan" value="comfort">
  <vb-radio-item value="economy">Economy</vb-radio-item>
  <vb-radio-item value="comfort">Comfort</vb-radio-item>
  <vb-radio-item value="business">Business</vb-radio-item>
  <vb-radio-item value="first" disabled>First Class</vb-radio-item>
</vb-radio-group>

<!-- Horizontal -->
<vb-radio-group name="size" value="md" orientation="horizontal">
  <vb-radio-item value="sm">Small</vb-radio-item>
  <vb-radio-item value="md">Medium</vb-radio-item>
  <vb-radio-item value="lg">Large</vb-radio-item>
</vb-radio-group>

File: src/components/radio.js Elements: vb-radio-group, vb-radio-item Attributes (group): name · value · orientation — vertical | horizontal Events: change — detail: { value: string }

Select

<vb-select placeholder="Select a country">
  <option value="mx">Mexico</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</vb-select>

File: src/components/select.js Elements: vb-select Attributes: placeholder · value · disabled · name

Separator

<vb-separator></vb-separator>
<vb-separator orientation="vertical" style="height:2rem"></vb-separator>

File: src/components/separator.js Elements: vb-separator Attributes: orientation — horizontal | vertical

Sheet

<vb-sheet>
  <vb-sheet-trigger>
    <vb-button variant="outline">Open Sheet</vb-button>
  </vb-sheet-trigger>
  <vb-sheet-content side="right">
    <vb-sheet-header>
      <vb-sheet-title>Edit Profile</vb-sheet-title>
      <vb-sheet-description>Make changes here.</vb-sheet-description>
    </vb-sheet-header>
    <vb-input placeholder="Name"></vb-input>
    <vb-sheet-footer>
      <vb-button>Save</vb-button>
    </vb-sheet-footer>
  </vb-sheet-content>
</vb-sheet>

File: src/components/sheet.js Elements: vb-sheet, vb-sheet-trigger, vb-sheet-content, vb-sheet-header, vb-sheet-title, vb-sheet-description, vb-sheet-footer Attributes (content): side — top | right | bottom | left

Skeleton

<vb-skeleton style="width:12rem;height:1rem"></vb-skeleton>
<vb-skeleton style="width:3rem;height:3rem;border-radius:9999px"></vb-skeleton>

File: src/components/skeleton.js Elements: vb-skeleton

Slider

<vb-slider value="40"></vb-slider>
<vb-slider value="50" min="0" max="200" step="10"></vb-slider>
<vb-slider disabled value="30"></vb-slider>

File: src/components/slider.js Elements: vb-slider Attributes: value · min · max · step · disabled Events: input — detail: { value: number }

Spinner

<vb-spinner size="sm"></vb-spinner>
<vb-spinner></vb-spinner>
<vb-spinner size="lg"></vb-spinner>

File: src/components/spinner.js Elements: vb-spinner Attributes: size — sm | default | lg

Switch

<vb-switch></vb-switch>
<vb-switch checked></vb-switch>
<vb-switch disabled></vb-switch>

File: src/components/switch.js Elements: vb-switch Attributes: checked · disabled Events: change — detail: { checked: boolean }

Table

Uses a <vb-table> wrapper around a native <table>. Styles are applied automatically to th, td, tr inside.

<vb-table>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td><vb-badge>Active</vb-badge></td>
        <td>Admin</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td><vb-badge variant="secondary">Inactive</vb-badge></td>
        <td>User</td>
      </tr>
    </tbody>
  </table>
</vb-table>

File: src/components/table.js Elements: vb-table

Tabs

<vb-tabs value="tab1">
  <vb-tabs-list>
    <vb-tabs-trigger value="tab1">Account</vb-tabs-trigger>
    <vb-tabs-trigger value="tab2">Password</vb-tabs-trigger>
  </vb-tabs-list>
  <vb-tabs-content value="tab1">Account settings here.</vb-tabs-content>
  <vb-tabs-content value="tab2">Password settings here.</vb-tabs-content>
</vb-tabs>

File: src/components/tabs.js Elements: vb-tabs, vb-tabs-list, vb-tabs-trigger, vb-tabs-content Attributes: value

Toast

Place <vb-toaster> once in your page. Then call toast() from JavaScript.

<vb-toaster position="bottom-right"></vb-toaster>

<vb-button onclick="toast('Hello!')">Simple</vb-button>
<vb-button onclick="toast.success('Saved!')">Success</vb-button>
<vb-button onclick="toast.error({title:'Error', description:'Something failed'})">Error</vb-button>
<vb-button onclick="toast.warning('Be careful')">Warning</vb-button>
<vb-button onclick="toast.info('FYI')">Info</vb-button>

File: src/components/toast.js Elements: vb-toaster Attributes: position — top-left | top-center | top-right | bottom-left | bottom-center | bottom-right JS API: toast(message) · toast({ title, description, type, duration }) · toast.success() · toast.error() · toast.warning() · toast.info()

Toggle

<vb-toggle>B</vb-toggle>
<vb-toggle pressed>I</vb-toggle>
<vb-toggle disabled>U</vb-toggle>

File: src/components/toggle.js Elements: vb-toggle Attributes: pressed · disabled Events: toggle — detail: { pressed: boolean }

Tooltip

<vb-tooltip>
  <vb-tooltip-trigger>
    <vb-button variant="outline">Hover me</vb-button>
  </vb-tooltip-trigger>
  <vb-tooltip-content>This is a tooltip</vb-tooltip-content>
</vb-tooltip>

File: src/components/tooltip.js Elements: vb-tooltip, vb-tooltip-trigger, vb-tooltip-content

File Structure

src/
├── theme.js              # CSS custom properties + auto-injection
├── index.js              # Barrel export (imports all components)
└── components/
    ├── accordion.js
    ├── alert.js
    ├── avatar.js
    ├── badge.js
    ├── breadcrumb.js
    ├── button.js
    ├── card.js
    ├── checkbox.js
    ├── dialog.js
    ├── dropdown-menu.js
    ├── form.js           # label + textarea
    ├── input.js
    ├── input-group.js
    ├── kbd.js
    ├── pagination.js
    ├── progress.js
    ├── radio.js
    ├── select.js
    ├── separator.js
    ├── sheet.js
    ├── skeleton.js
    ├── slider.js
    ├── spinner.js
    ├── switch.js
    ├── table.js
    ├── tabs.js
    ├── toast.js
    ├── toggle.js
    └── tooltip.js

License

MIT