Enterprise Design System

Web Components design system

Lit-based custom elements, design tokens, and framework-agnostic usage.

Stack: Lit, TypeScript, Vite, Storybook
Package: @poluru-labs/enterprise-design-system-wc

Overview

The Web Components catalog is the framework-agnostic core of the Enterprise Design System. Components are Lit custom elements registered as eds-* tags. Install @poluru-labs/enterprise-design-system-wc and lit, load tokens.css once, import the package to register elements, then write <eds-button variant="primary"> in any stack.

Tokens ship as CSS custom properties (--eds-color-surface, --eds-space-6, --eds-radius-lg) and as a typed TypeScript object. Dark theme is the eds-theme-dark class on html or body; semantic aliases remap, brand stays. Storybook also documents typography, the icon set, and a copy-to-clipboard pattern.

Integration docs cover Angular (CUSTOM_ELEMENTS_SCHEMA), React, and Vue consuming this package directly. Sibling packages exist when you want native Angular, React, Vue, or React Native APIs instead of custom elements.

Features

eds-* custom elements. One side-effect import registers the set. Markup is HTML, not a framework render function.
Token-first CSS. Components consume --eds-* variables. tokens.css (or the TS tokens object) is the source of truth.
Light and dark. document.documentElement.classList.toggle('eds-theme-dark', isDark) is the whole theme API.
Integration guides. Storybook pages for Angular 17+, React 18/19, and Vue 3, plus an overview of shared setup.
DOM events. CustomEvents such as eds-click and eds-change so any framework can listen without a wrapper.

Technologies

Library

Lit
TypeScript
Vite
@poluru-labs/enterprise-design-system-wc
Custom elements (eds-*)

Design

tokens.css / --eds-* variables
Typed tokens object
Brand, ink, and semantic palettes
eds-theme-dark

Storybook

Controls
Docs / autodocs
Accessibility addon
Themes addon (light / dark)
Actions, viewport, measure, outline

Components

The Web Components Storybook covers the inventory below. Open a component in the live demo for Controls, docs, and accessibility checks.

Custom elements

Actions

Button
ButtonGroup
SplitButton
Link

Forms

Feedback

Navigation

Overlays

Modal
Drawer
Popover
Tooltip
DropdownMenu

Data display

Utilities

Pages

These are the Storybook sidebar entries in the live catalog. Written install guides stay on theValorSoftSol docs.

Storybook	Page	What it does	Type
`Introduction`	Introduction	Quick start, what’s included, and design principles.	Docs
`Introduction/Author`	Author	Package authorship and related links.	Docs
`Foundations/Tokens`	Tokens	Color, type, space, and motion as CSS variables and a TypeScript object.	Docs
`Foundations/Themes`	Themes	Light neutrals, brand scale, and eds-theme-dark.	Docs
`Foundations/Typography`	Typography	Type tokens for the system.	Docs
`Foundations/Icons`	Icons	Built-in SVG set on eds-icon and on Button, Input, Alert, Toast.	Story
`Foundations/Copy to clipboard`	Copy to clipboard	Pattern for copying snippet source from docs.	Docs
`Integration/Overview`	Integration overview	Install, load tokens, register elements, theme, and events for every framework.	Docs
`Integration/Angular`	Angular integration	CUSTOM_ELEMENTS_SCHEMA and using eds-* tags in Angular 17+.	Docs
`Integration/React`	React integration	Consuming custom elements from a React 18/19 app.	Docs
`Integration/Vue`	Vue integration	Using eds-* tags in Vue 3 templates.	Docs
`Components/*`	Component stories	Autodocs and stories for each eds-* element.	Story