agnosticui/agnosticui

AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue 3, Angular, and Svelte.

Summary

AgnosticUI is a CLI-based UI component library that copies component source into your project instead of installing a runtime dependency. It supports React, Vue, Svelte, and Lit/Web Components from a single shared core, and ships with prompt-ready "Playbooks" aimed at AI coding agents. The project is written in TypeScript and released under Apache License 2.0.

What it is useful for

AgnosticUI is useful when you want full control over component source rather than relying on a black-box package in node_modules. Because the copied source lives in your repo, AI tools including Cursor, Claude Code, Copilot, Windsurf, Aider, Gemini, Replit, and Kiro can read the actual component code instead of guessing props or APIs, which the README describes as reducing hallucination.

It is also useful when one design system has to work across multiple frameworks without forking. Components are authored once as Lit Web Components and the CLI wraps them for the target framework at copy time, so the same Button works in React, Vue, Svelte, and Lit. The README lists accessibility features: semantic HTML, WAI-ARIA patterns, keyboard navigation, AA-validated color contrast, reduced-motion support, and built-in focus management.

The Playbooks (Login Form, Onboarding Wizard, Discovery Dashboard, Support Center, Data Grid, Blog Reader, Landing Page) are useful when you want an AI agent to scaffold complete flows rather than assembling them component by component.

Documented limitations: v2 is a complete rewrite and is not compatible with v1; v1 packages remain available only via the v1-legacy git tag. A small "Lab" group (BadgeFx, ButtonFx, Flex, IconButtonFx) is marked experimental in the README.

How engineers can use it

The README documents a two-step CLI workflow. From the root of an existing app:

npx agnosticui-cli init --framework react
npx agnosticui-cli add Button Card Input

The same commands work for Vue, Svelte, and Lit by changing --framework. After add runs, the terminal prints the exact import path.

Components are written under src/components/ag/ by default; that location is described as configurable. Theming is done by importing token CSS files such as ag-tokens.css, ag-tokens-dark.css, brutalist-light.css, and brutalist-dark.css, and swapping a skin updates all components without code changes.

For AI-assisted work, each Playbook ships with a PROMPT-3-FRAMEWORKS.md file, and the repo includes /v2/docs/ documents: sdui-architecture.md, llm-prompt-guide.md, and schema-coverage.md. Contribution guidelines are in CONTRIBUTING.md.