Diwa Design System

Scroller

A horizontal scroll container with gradient fade indicators. Ideal for tab bars, tag lists, and other content that may overflow its container.

Design Tokens

CSS custom properties for consistent theming

Components

Reusable UI building blocks with a unified API

Accessibility

WCAG 2.1 compliant out of the box

Dark Mode

First-class dark theme support built in

TypeScript

Fully typed API surface across all frameworks

Web Standards

Native custom elements with Shadow DOM

Framework Agnostic

Works with React, Angular, Vue, and vanilla JS

Motion Safe

Respects prefers-reduced-motion globally

<diwa-scroller align-scroll-indicator="center">
  <div style='{"display":"flex","gap":"16px","padding":"16px 4px"}'>
    <div style='{"width":"180px","flexShrink":0,"background":"var(--diwa-bg-elevated)","border":"1px solid var(--diwa-border)","borderRadius":"8px","padding":"16px","boxSizing":"border-box"}'>
      <p style='{"margin":"0 0 6px","fontWeight":"600","fontSize":"13px","color":"var(--diwa-text-primary)","lineHeight":"1.3"}'>Design Tokens</p>
      <p style='{"margin":"0","fontSize":"12px","color":"var(--diwa-text-secondary)","lineHeight":"1.5"}'>CSS custom properties for consistent theming</p>
    </div>
    <div style='{"width":"180px","flexShrink":0,"background":"var(--diwa-bg-elevated)","border":"1px solid var(--diwa-border)","borderRadius":"8px","padding":"16px","boxSizing":"border-box"}'>
      <p style='{"margin":"0 0 6px","fontWeight":"600","fontSize":"13px","color":"var(--diwa-text-primary)","lineHeight":"1.3"}'>Components</p>
      <p style='{"margin":"0","fontSize":"12px","color":"var(--diwa-text-secondary)","lineHeight":"1.5"}'>Reusable UI building blocks with a unified API</p>
    </div>
    <div style='{"width":"180px","flexShrink":0,"background":"var(--diwa-bg-elevated)","border":"1px solid var(--diwa-border)","borderRadius":"8px","padding":"16px","boxSizing":"border-box"}'>
      <p style='{"margin":"0 0 6px","fontWeight":"600","fontSize":"13px","color":"var(--diwa-text-primary)","lineHeight":"1.3"}'>Accessibility</p>
      <p style='{"margin":"0","fontSize":"12px","color":"var(--diwa-text-secondary)","lineHeight":"1.5"}'>WCAG 2.1 compliant out of the box</p>
    </div>
    <div style='{"width":"180px","flexShrink":0,"background":"var(--diwa-bg-elevated)","border":"1px solid var(--diwa-border)","borderRadius":"8px","padding":"16px","boxSizing":"border-box"}'>
      <p style='{"margin":"0 0 6px","fontWeight":"600","fontSize":"13px","color":"var(--diwa-text-primary)","lineHeight":"1.3"}'>Dark Mode</p>
      <p style='{"margin":"0","fontSize":"12px","color":"var(--diwa-text-secondary)","lineHeight":"1.5"}'>First-class dark theme support built in</p>
    </div>
    <div style='{"width":"180px","flexShrink":0,"background":"var(--diwa-bg-elevated)","border":"1px solid var(--diwa-border)","borderRadius":"8px","padding":"16px","boxSizing":"border-box"}'>
      <p style='{"margin":"0 0 6px","fontWeight":"600","fontSize":"13px","color":"var(--diwa-text-primary)","lineHeight":"1.3"}'>TypeScript</p>
      <p style='{"margin":"0","fontSize":"12px","color":"var(--diwa-text-secondary)","lineHeight":"1.5"}'>Fully typed API surface across all frameworks</p>
    </div>
    <div style='{"width":"180px","flexShrink":0,"background":"var(--diwa-bg-elevated)","border":"1px solid var(--diwa-border)","borderRadius":"8px","padding":"16px","boxSizing":"border-box"}'>
      <p style='{"margin":"0 0 6px","fontWeight":"600","fontSize":"13px","color":"var(--diwa-text-primary)","lineHeight":"1.3"}'>Web Standards</p>
      <p style='{"margin":"0","fontSize":"12px","color":"var(--diwa-text-secondary)","lineHeight":"1.5"}'>Native custom elements with Shadow DOM</p>
    </div>
    <div style='{"width":"180px","flexShrink":0,"background":"var(--diwa-bg-elevated)","border":"1px solid var(--diwa-border)","borderRadius":"8px","padding":"16px","boxSizing":"border-box"}'>
      <p style='{"margin":"0 0 6px","fontWeight":"600","fontSize":"13px","color":"var(--diwa-text-primary)","lineHeight":"1.3"}'>Framework Agnostic</p>
      <p style='{"margin":"0","fontSize":"12px","color":"var(--diwa-text-secondary)","lineHeight":"1.5"}'>Works with React, Angular, Vue, and vanilla JS</p>
    </div>
    <div style='{"width":"180px","flexShrink":0,"background":"var(--diwa-bg-elevated)","border":"1px solid var(--diwa-border)","borderRadius":"8px","padding":"16px","boxSizing":"border-box"}'>
      <p style='{"margin":"0 0 6px","fontWeight":"600","fontSize":"13px","color":"var(--diwa-text-primary)","lineHeight":"1.3"}'>Motion Safe</p>
      <p style='{"margin":"0","fontSize":"12px","color":"var(--diwa-text-secondary)","lineHeight":"1.5"}'>Respects prefers-reduced-motion globally</p>
    </div>
  </div>
</diwa-scroller>