@dsn-starter-kit/components-html

Pure HTML/CSS components for the design system: no JavaScript required.

Use these components in static HTML pages, server-rendered templates, or any project that doesn't use a JavaScript framework.

Features

• Pure CSS, no JavaScript dependencies
• BEM class naming convention
• Uses design tokens via CSS custom properties
• Works with any templating language or static HTML

Installation

pnpm add @dsn-starter-kit/components-html

Usage

In HTML

Include the CSS and use BEM classes on standard HTML elements:

<link
  rel="stylesheet"
  href="@dsn-starter-kit/design-tokens/dist/css/variables.css"
/>
<link
  rel="stylesheet"
  href="@dsn-starter-kit/components-html/dist/components.css"
/>

<button class="dsn-button dsn-button--strong dsn-button--size-default">
  Save
</button>

<button class="dsn-button dsn-button--default dsn-button--size-small">
  Cancel
</button>

<button class="dsn-button dsn-button--strong-negative dsn-button--size-default">
  Delete
</button>

In JavaScript/TypeScript Projects

The package exports individual component CSS files:

// Import all components
import '@dsn-starter-kit/components-html';

// Or import individual components
import '@dsn-starter-kit/components-html/button';
import '@dsn-starter-kit/components-html/alert';
import '@dsn-starter-kit/components-html/modal-dialog';

Available exports:

• ./action-group — Action group styles
• ./alert — Alert component styles
• ./backdrop — Backdrop overlay styles
• ./body — Body component styles
• ./breadcrumb-navigation — Breadcrumb navigation styles
• ./breakout-section — Breakout section styles
• ./button — Button component styles
• ./button-link — ButtonLink component styles
• ./card — Card component styles
• ./container — Container layout styles
• ./details — Details/summary styles
• ./dot-badge — Dot badge styles
• ./drawer — Drawer component styles
• ./file — File component styles
• ./file-input — File input styles
• ./form-field — Form field container styles
• ./form-field-description — Form field description styles
• ./form-field-error-message — Form field error message styles
• ./form-field-label — Form field label styles
• ./form-field-status — Form field status styles
• ./grid — Grid layout styles
• ./heading — Heading styles
• ./hero — Hero section styles
• ./icon — Icon component styles
• ./image — Image component styles
• ./link — Link component styles
• ./link-button — LinkButton component styles
• ./logo — Logo component styles
• ./menu — Menu component styles
• ./menu-button — Menu button styles
• ./menu-link — Menu link styles
• ./modal-dialog — Modal dialog styles
• ./note — Note component styles
• ./number-badge — Number badge styles
• ./ordered-list — Ordered list styles
• ./page-body — Page body styles
• ./page-footer — Page footer styles
• ./page-header — Page header styles
• ./page-layout — Page layout styles
• ./paragraph — Paragraph styles
• ./popover — Popover component styles
• ./progress-bar — Progress bar styles
• ./skip-link — Skip link styles
• ./spinner — Spinner component styles
• ./stack — Stack layout styles
• ./status-badge — Status badge styles
• ./summary-list — Summary list styles
• ./table — Table component styles
• ./text-area — Text area styles
• ./text-input — Text input styles
• ./unordered-list — Unordered list styles

Available Components

| Component | CSS Classes | Export Path | | --------------------- | ---------------------------------------------------------------- | ---------------------------- | | ActionGroup | dsn-action-group | ./action-group | | Alert | dsn-alert, dsn-alert--{variant} | ./alert | | Backdrop | dsn-backdrop | ./backdrop | | Body | dsn-body | ./body | | BreadcrumbNavigation | dsn-breadcrumb-navigation | ./breadcrumb-navigation | | BreakoutSection | dsn-breakout-section | ./breakout-section | | Button | dsn-button, dsn-button--{variant}, dsn-button--size-{size} | ./button | | ButtonLink | dsn-button | ./button-link | | Card | dsn-card | ./card | | Container | dsn-container | ./container | | Details | dsn-details | ./details | | DotBadge | dsn-dot-badge, dsn-dot-badge--{variant} | ./dot-badge | | Drawer | dsn-drawer | ./drawer | | File | dsn-file | ./file | | FileInput | dsn-file-input | ./file-input | | FormField | dsn-form-field | ./form-field | | FormFieldDescription | dsn-form-field-description | ./form-field-description | | FormFieldErrorMessage | dsn-form-field-error-message | ./form-field-error-message | | FormFieldLabel | dsn-form-field-label | ./form-field-label | | FormFieldStatus | dsn-form-field-status, dsn-form-field-status--{variant} | ./form-field-status | | Grid | dsn-grid | ./grid | | Heading | dsn-heading, dsn-heading--level-{level} | ./heading | | Hero | dsn-hero | ./hero | | Icon | dsn-icon, dsn-icon--size-{size} | ./icon | | Image | dsn-image | ./image | | Link | dsn-link, dsn-link--external | ./link | | LinkButton | dsn-link | ./link-button | | Logo | dsn-logo | ./logo | | Menu | dsn-menu, dsn-menu--horizontal | ./menu | | MenuButton | dsn-menu-button | ./menu-button | | MenuLink | dsn-menu-link | ./menu-link | | ModalDialog | dsn-modal-dialog | ./modal-dialog | | Note | dsn-note, dsn-note--{variant} | ./note | | NumberBadge | dsn-number-badge | ./number-badge | | OrderedList | dsn-ordered-list | ./ordered-list | | PageBody | dsn-page-body | ./page-body | | PageFooter | dsn-page-footer | ./page-footer | | PageHeader | dsn-page-header | ./page-header | | PageLayout | dsn-page-layout | ./page-layout | | Paragraph | dsn-paragraph, dsn-paragraph--size-{size} | ./paragraph | | Popover | dsn-popover | ./popover | | ProgressBar | dsn-progress-bar | ./progress-bar | | SkipLink | dsn-skip-link | ./skip-link | | Spinner | dsn-spinner | ./spinner | | Stack | dsn-stack, dsn-stack--space-{size} | ./stack | | StatusBadge | dsn-status-badge, dsn-status-badge--{variant} | ./status-badge | | SummaryList | dsn-summary-list | ./summary-list | | Table | dsn-table | ./table | | TextArea | dsn-text-area, dsn-text-area--size-{size} | ./text-area | | TextInput | dsn-text-input, dsn-text-input--size-{size} | ./text-input | | UnorderedList | dsn-unordered-list | ./unordered-list |

Assets

SVG icons are available in assets/icons/ for use as inline SVGs:

assets/icons/
├── check.svg
├── chevron-down.svg
├── home.svg
├── ... (20 icons total)

Building

pnpm --filter @dsn-starter-kit/components-html build

License

MIT