Introduction

@bnotk/dsx

A framework-agnostic design system built with plain CSS for primitives and Lit Web Components for complex widgets.

What is it?

@bnotk/dsx provides:

CSS modules — Buttons, inputs, selects, tables, form previews, status indicators, and more
14 Web Components — Dialog, accordion, data table, datepicker, dropdown, and more
Zero framework lock-in — Works with Angular, React, Vue, Svelte, or plain HTML

Design Principles

Platform-first — Use native HTML elements and CSS features wherever possible
Minimal dependencies — Only Lit (~7KB gzipped) as a runtime dependency
Selective imports — Import only what you need
Chrome 138 optimized — Leverages <dialog>, appearance:base-select, Popover API, CSS nesting

Quick Start

npm install @bnotk/dsx

<!-- Import all CSS -->
<link rel="stylesheet" href="node_modules/@bnotk/dsx/css/index.css">

<!-- Or import individual modules -->
<link rel="stylesheet" href="node_modules/@bnotk/dsx/css/tokens.css">
<link rel="stylesheet" href="node_modules/@bnotk/dsx/css/buttons.css">

<!-- Use Web Components -->
<script type="module">
  import '@bnotk/dsx/components/dialog.js';
  import '@bnotk/dsx/components/table.js';
</script>

<dsx-dialog heading="Hello" size="md">
  <p slot="body">Welcome to dsx!</p>
</dsx-dialog>

Browser Support

Browser	Version	Status
Chrome	138+	✅ Supported
Electron	37.6+	✅ Supported
Others	—	❌ Not targeted

This library uses modern CSS features (nesting, :has(), appearance:base-select, @layer) that are only guaranteed in Chrome 138+.