@7onic-ui/react 0.3.0 → 0.3.1

package/README.md

@@ -28,6 +28,7 @@
 | **🧩** | **shadcn freedom + MUI convenience** | shadcn's customization with none of its missing features. MUI's built-in power with none of its styling constraints. Both, by design. |
 | **⚡** | **npm or CLI — your choice** | `npm install` for packages, `npx 7onic add` for local copy. Same components, two workflows. |
 | **🔀** | **Only Tailwind v3+v4 dual support** | The ecosystem's only design system supporting both Tailwind versions. Same tokens, same DX. |
+| **🪄** | **Zero-config framework compat** | Works with Next.js 15 + Vite defaults out of the box. No Provider wrapper, no `globals.css` replacement, no body class setup. Install → import → done. |
 | **🎮** | **Built-in playground** | Interactive props editor + live code generation in docs. No Storybook setup needed. |
 | **🌗** | **Dark mode, zero config** | Light/dark themes built into tokens. System preference detection out of the box. |
 | **🔓** | **Framework-agnostic tokens** | Tokens ship as pure CSS variables. Use with Vue, Angular, Svelte, or vanilla CSS — no React required. |
@@ -96,25 +97,19 @@ module.exports = {
 ```
 </details>
 
-Apply base theme colors to `<body>` — enables dark mode and consistent backgrounds:
-
-```html
-<body class="bg-background text-foreground">
-```
-
 Use components:
 
 ```tsx
-import { Button, Card } from '@7onic-ui/react'
+import { Button, Card, CardHeader, CardTitle, CardContent } from '@7onic-ui/react'
 import { Chart, type ChartConfig } from '@7onic-ui/react/chart'  // charts: separate entry
 
 <Button variant="solid" color="primary">Get Started</Button>
 
 <Card>
-  <Card.Header>
-    <Card.Title>Settings</Card.Title>
-  </Card.Header>
-  <Card.Content>...</Card.Content>
+  <CardHeader>
+    <CardTitle>Settings</CardTitle>
+  </CardHeader>
+  <CardContent>...</CardContent>
 </Card>
 ```
 
@@ -168,6 +163,7 @@ figma-tokens.json                    ← SSOT (the only file you edit)
     ├── css/variables.css            ← CSS variables (all primitives)
     ├── css/themes/light.css         ← Light theme semantics
     ├── css/themes/dark.css          ← Dark theme semantics
+    ├── css/reset.css                ← Framework template baseline
     ├── css/all.css                  ← All-in-one bundle
     ├── tailwind/v3-preset.js        ← Tailwind v3 preset
     ├── tailwind/v4-theme.css        ← Tailwind v4 theme
@@ -198,10 +194,11 @@ Breaking changes are auto-detected with diff visualization. Backward-compatible
 
 | File | Description |
 |------|-------------|
-| `css/all.css` | All-in-one bundle (variables + light + dark) |
+| `css/all.css` | All-in-one bundle (variables + light + dark + reset) |
 | `css/variables.css` | Primitive tokens only |
 | `css/themes/light.css` | Light theme semantics |
 | `css/themes/dark.css` | Dark theme semantics |
+| `css/reset.css` | Framework template baseline (bundled into `all.css` + `v4.css`) |
 | `tailwind/v4.css` | All-in-one Tailwind v4 |
 | `tailwind/v3-preset.js` | Tailwind v3 preset |
 | `tailwind/v4-theme.css` | Tailwind v4 theme definitions |

package/llms.txt

@@ -77,22 +77,16 @@ module.exports = {
 }
 ```
 
-**2-3. Set body classes:**
-```html
-<body class="bg-background text-foreground">
-```
-
-**2-4. Apply user's answers:**
+**2-3. Apply user's answers:**
 
 - Dark mode = yes → implement dark mode toggle (see below)
 - Custom font → load font (next/font for Next.js, CDN for Vite) + set `--font-family-sans`
 - Locale includes Japanese → load Noto Sans JP font
 - Locale includes Korean → load Noto Sans KR font
 
-**2-5. Verify setup is complete before writing any UI code:**
+**2-4. Verify setup is complete before writing any UI code:**
 - [ ] Packages installed (@7onic-ui/react, @7onic-ui/tokens, lucide-react)
 - [ ] globals.css has ALL required imports in correct order
-- [ ] Body has `bg-background text-foreground`
 - [ ] Dark mode toggle (if selected)
 - [ ] Font loaded (if custom)
 - [ ] CJK fonts loaded (if applicable)
@@ -121,7 +115,7 @@ Place `<Toaster />` once in your root layout file. Without this, `toast()` calls
 import { Toaster } from '@7onic-ui/react'
 
 // In your root layout (e.g., app/layout.tsx)
-<body className="bg-background text-foreground">
+<body>
   {children}
   <Toaster position="bottom-right" />
 </body>
@@ -279,7 +273,7 @@ The token system covers all UI needs out of the box. As AI, use existing tokens
 If the user needs custom values beyond existing tokens, they will handle it separately.
 Customization guide: https://7onic.design/components/theming
 
-**Never modify generated token files** — these are auto-generated from figma-tokens.json via sync-tokens. AI must never edit, add to, or delete from: `variables.css`, `light.css`, `dark.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
+**Never modify generated token files** — these are auto-generated from figma-tokens.json via sync-tokens. AI must never edit, add to, or delete from: `variables.css`, `light.css`, `dark.css`, `reset.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
 
 ### Self-Check (after writing ANY code)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7onic-ui/react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "sideEffects": [
     "*.css"