🚀 Workrail UI v2.0

✅ Modern Component System Active

ES Modules + Web Components + Design Tokens = Zero Bugs

1. Web Components (Custom Elements)

This is a Web Component with Shadow DOM.

Styles are scoped and can't conflict!

Left border automatically applied.

All design tokens available via CSS variables.

Click the header to collapse this card.

Smooth animations built-in.

Works in both light and dark mode.

2. Button Components

Primary Secondary Ghost Danger Success
Small Medium Large Loading... Disabled

3. How It Works

File Organization:

/assets/
  styles/
    tokens.css          ← Design tokens only
  components/
    index.js            ← Main export
    base.js             ← Base class & utilities
    Card.js             ← Card component
    Button.js           ← Button component
    DashboardLayout.js  ← Layout component

Usage (Simple HTML):

<!-- Import components -->
<script type="module">
  import '/assets/components/index.js';
</script>

<!-- Use them in HTML -->
<wr-card title="My Card" variant="glass">
  Content here
</wr-card>

<wr-button variant="primary" icon="rocket">
  Click Me
</wr-button>

4. Benefits

ES Modules work natively in browsers.

No Webpack, Vite, or bundler required.

Shadow DOM scopes styles.

CSS can't conflict between components.

Browser only loads what you import.

Unused components aren't downloaded.

Web Components are a standard.

Works with any framework or none.

Each component is self-contained.

One file per component.

Native browser API.

Will work forever.

5. Layout Components (Grid & Stack)

Grid Layout:

Grid Item 1

Grid Item 2

Grid Item 3

Stack Layout:

Success Warning Error Info

6. Data Display Components

Stat Cards:

Progress Rings:

Badges:

Complete In Progress Error Info Neutral Small Large

7. What's Next

✅ Phase 1: Base components (Card, Button, DashboardLayout)
✅ Phase 2: Data display (StatCard, Badge, ProgressRing, Grid, Stack)
⏳ Phase 3: Interactive (Modal, Dropdown, Toast, Tabs)
⏳ Phase 4: Dashboard scaffold system
⏳ Phase 5: Migrate existing dashboards
Workrail UI v2.0 - Modern Component System