v3.1.3

Build Accessible
Interfaces Faster.

Diwa is a framework-agnostic design system built with Web Components and shared CSS tokens. Integrate once, then ship consistent accessible UI across React, Angular, Vue, Next.js, and vanilla HTML.

Get Started

Browse Components

React

Angular

Vue

Next.js

Vanilla JS

44Components

TypeScriptReady

CSS TokensSystem

WCAG 2.2 AACompliant

Quick Start in 3 Steps

1. Install packagesInstall the Diwa component package in your app.
```
npm install @diwacopilot/components
```

2. Load global tokens and web components

Include generated CSS tokens and the ESM loader in your root layout.

<link rel="stylesheet" href="/stencil/diwa-components.css" />
<Script src="/stencil/diwa-components.esm.js" type="module" strategy="beforeInteractive" />

3. Render your first componentUse a Diwa element directly in JSX, HTML, or your framework template.
```
<diwa-button variant="primary">Save</diwa-button>
```

Choose Your Path

Components

Learn the page tabs and start with the most useful primitives.

Read the Components Introduction page.

Open a Configurator page and test states with keyboard.

Open Components

Developing

Choose your framework setup path and integration strategy.

Use the support matrix to pick a framework guide.

Follow install, setup, events, and readiness steps.

Open Developing

Styles

Learn tokens, theming, and the interaction contract before customization.

Review CSS and JS token usage snippets.

Read Focus, Hover, and Motion guidance before overrides.

Open Styles

Designing

Align design intent with token architecture and component usage.

Use token-first workflow for design decisions.

Map design handoff notes to component docs tabs.

Open Designing

News

Track releases, roadmap priorities, and future migration guidance.

Review changelog before upgrades.

Check roadmap for upcoming framework documentation.

Open News

Recommended First Components

Start with these components to cover common product surfaces: actions, forms, feedback, and navigation.

Button

Starter

Primary actions, confirms, and destructive decisions.

Open Component

Input Text

Starter

Baseline text entry for forms, search, and onboarding.

Open Component

Select

Starter

Single-choice selection with compact, scalable option lists.

Open Component

Toast

Starter

Transient feedback for success, warning, and error states.

Open Component

Tabs

Starter

Organize related content into fast-switching view groups.

Open Component

Modal

Starter

Focused overlays for confirmations and critical form tasks.

Open Component

Build AccessibleInterfaces Faster.

Build Accessible
Interfaces Faster.