Shared React UI component library for MirrorStack.
Built with React 19, TypeScript, Tailwind CSS v4, and Material Design 3.
Storybook Demo | Contributing | Good First Issues | Slack
pnpm add @mirrorstack-ai/web-ui-kitImport the theme tokens in your app's globals.css:
@import "tailwindcss";
@source "@mirrorstack-ai/web-ui-kit/src/components";
@import "@mirrorstack-ai/web-ui-kit/src/theme.css";Add the Material Symbols font in your HTML <head>:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"
/>import { Button } from "@mirrorstack-ai/web-ui-kit";
function App() {
return (
<Button variant="filled" color="primary" leftIcon="add">
Create
</Button>
);
}| Category | Components |
|---|---|
| Actions | Button |
| Feedback | Progress (linear, circular, wave) |
More components are being ported from the reference/v2-restored branch. Run pnpm components list for the latest, or see CONTRIBUTING.md for how to add them.
Wrap your app with ThemeProvider to enable light, dark, and auto (system) themes:
import { ThemeProvider } from "@mirrorstack-ai/web-ui-kit";
export default function App({ children }) {
return <ThemeProvider>{children}</ThemeProvider>;
}ThemeProvider manages the .dark class on <html>, persists the user's choice, and syncs across apps via the API.
To prevent a flash of light theme before hydration, add this blocking script to your <head>:
<script>
(function () {
try {
var theme = localStorage.getItem("theme") || "auto";
var isDark =
theme === "auto"
? window.matchMedia("(prefers-color-scheme: dark)").matches
: theme === "dark";
if (isDark) document.documentElement.classList.add("dark");
} catch (e) {}
})();
</script>Run the component explorer locally:
pnpm storybookOpens at http://localhost:6006. Use the toolbar to toggle between light and dark mode.
src/
components/
ui/ Standalone, reusable components
<category>/<component>/
Component.tsx
Component.stories.tsx
Component.test.tsx
layout/ Page-level compositions
<category>/<layout>/
Layout.tsx
Layout.stories.tsx
context/ Providers
<context>/
Context.tsx
Context.test.tsx
hooks/ Reusable hooks
utils/ Helpers (cn, formatBytes, formatDate)
assets/ SVGs and icons
theme.css MD3 design tokens (light + dark)
- React 19 with TypeScript
- Tailwind CSS v4 with
@tailwindcss/vite - Material Design 3 color system and design tokens
- Material Symbols Rounded for icons
- Storybook 8 for component development
- Vitest for testing
We welcome contributions! Check out our Contributing Guide to get started.
Look for issues labeled good first issue for beginner-friendly tasks.
MIT
