atxp-dev · robdimarco-atxp · Dec 23, 2025 · Dec 23, 2025
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -41,6 +41,23 @@ mcp__figma__get_design_context({
 
 **Patterns**: Use native HTML elements, `.sr-only` for accessibility, `peer-*` modifiers for state styling, design tokens (`border-primary`, `bg-background`), avoid Radix UI unless complex state needed
 
+5. **Update Vanilla Components** (IMPORTANT):
+   - Extract component classes: `node vanilla/extract-components.cjs ComponentName`
+   - Update relevant vanilla HTML files in `vanilla/components/`
+   - If new component: Create new `.html` file with examples
+   - If modified component: Update existing examples to match new styles/variants
+   - Add component to `vanilla/index.html` showcase if not already present
+   - Update `vanilla/README.md` with new component documentation
+   - Test: Open HTML files in browser, verify styling matches React version
+
+**Vanilla Component Files**:
+- `vanilla/components/forms.html` - Checkbox, Radio, Select, Textarea
+- `vanilla/components/ui-elements.html` - Badge, Avatar, Separator
+- `vanilla/components/interactive.html` - Tabs, Accordion, Progress, Skeleton
+- `vanilla/components/button.html`, `card.html`, `input.html`, `alert.html`, `dialog.html`
+
+**Important**: The vanilla HTML/CSS/JS version must stay in sync with React components for consistency across frameworks.
+
 ---
 
 ## Adding a New Theme

diff --git a/README.md b/README.md
@@ -149,6 +149,87 @@ function MyCustomComponent() {
 
 **Note**: This is completely optional. The design system components work perfectly without any Tailwind setup in your project.
 
+## Vanilla HTML/CSS/JS Version
+
+Can't use React? **We've got you covered!** The ATXP Design System includes a complete vanilla HTML/CSS/JavaScript version of all components for projects that can't use React.
+
+### Quick Start
+
+```html
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <!-- Include the compiled CSS -->
+  <link rel="stylesheet" href="node_modules/@atxp/design-system/dist/styles.css">
+</head>
+<body>
+  <!-- Use components with pure HTML -->
+  <button class="inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-lg text-sm font-medium leading-5 transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2">
+    Click Me
+  </button>
+
+  <!-- Include vanilla JS for interactive components (optional) -->
+  <script src="node_modules/@atxp/design-system/vanilla/js/components.js"></script>
+</body>
+</html>
+```
+
+### Available Components
+
+The vanilla version includes 20+ components:
+
+- **Form Components**: Checkbox, Radio, Select, Textarea, Input
+- **UI Elements**: Badge, Avatar, Separator
+- **Interactive**: Tabs, Accordion, Progress, Skeleton
+- **Layout**: Button, Card, Alert, Dialog, Toast
+
+### Features
+
+- ✅ **Zero Dependencies** - Just HTML, CSS, and vanilla JavaScript
+- ✅ **All 4 Themes** - Light, Dark, ATXP, DBG with live switching
+- ✅ **Fully Accessible** - ARIA labels, keyboard navigation, screen reader support
+- ✅ **Same Design** - Matches the React version pixel-perfect
+- ✅ **Interactive Components** - Dialog, Tabs, Accordion, Toast with vanilla JS
+
+### Documentation
+
+- **Main Guide**: [`vanilla/README.md`](./vanilla/README.md)
+- **Live Examples**: Open [`vanilla/index.html`](./vanilla/index.html) in your browser
+- **Component Pages**:
+  - [`vanilla/components/forms.html`](./vanilla/components/forms.html) - Complete form elements
+  - [`vanilla/components/ui-elements.html`](./vanilla/components/ui-elements.html) - Badges, avatars, separators
+  - [`vanilla/components/interactive.html`](./vanilla/components/interactive.html) - Tabs, accordions, progress
+  - And more individual component examples
+
+### Theme Switching
+
+```html
+<!-- Add theme selector -->
+<select data-theme-control>
+  <option value="light">Light</option>
+  <option value="dark">Dark</option>
+  <option value="atxp">ATXP</option>
+  <option value="dbg">DBG</option>
+</select>
+
+<!-- JavaScript handles theme switching automatically -->
+<script src="vanilla/js/components.js"></script>
+```
+
+### Extraction Tool
+
+Keep vanilla components in sync with React:
+
+```bash
+# Extract a single component's classes
+node vanilla/extract-components.cjs Button
+
+# Extract all components
+node vanilla/extract-components.cjs --all
+```
+
+See [`vanilla/README.md`](./vanilla/README.md) for complete documentation, examples, and JavaScript API reference.
+
 ## Development
 
 ### Prerequisites

diff --git a/render.yaml b/render.yaml
@@ -6,4 +6,13 @@ services:
   buildCommand: pnpm install --frozen-lockfile && pnpm run build-storybook
   staticPublishPath: storybook-static
   autoDeployTrigger: commit
+
+- type: web
+  name: design-system-vanilla
+  runtime: static
+  repo: https://github.com/atxp-dev/design-system
+  buildCommand: pnpm install --frozen-lockfile && chmod +x vanilla/build.sh && ./vanilla/build.sh
+  staticPublishPath: vanilla
+  autoDeployTrigger: commit
+
 version: "1"
diff --git a/vanilla/.gitignore b/vanilla/.gitignore
@@ -0,0 +1,14 @@
+# Build artifacts
+dist/
+*.tar.gz
+*.zip
+
+# Backup files
+*.bak
+*~
+
+# Extracted component data
+extracted/
+
+# OS files
+.DS_Store