7onic-setup

7onic Setup — detect, configure, verify

Bring the current project to a working 7onic state. This skill is idempotent: when everything is already correct it changes nothing and reports a passing checklist. Never guess — every verdict below must come from reading the actual file.

Step 1 — Detect the project

Read package.json and record:

• Install route:
  • @7onic-ui/react in dependencies → npm route
  • a 7onic.json file at the root and/or components under the project's components/ui/ → CLI route (npx 7onic add source copies)
  • neither → go to Step 4 (fresh install)
• Tailwind major: tailwindcss version — ^4 → v4, ^3 → v3. No Tailwind at all → tokens still work as plain CSS variables (@7onic-ui/tokens/css/all.css), but component classes need Tailwind: say so and stop after wiring the CSS.
• Framework: next → Next.js (global CSS usually app/globals.css), vite → Vite (usually src/index.css).
• @7onic-ui/tokens must be present on both routes — it ships the CSS variables everything depends on.

Step 2 — Verify (and fix) the CSS wiring

Open the project's global CSS file and check against the matrix. Add only what is missing; never duplicate an import that already exists.

Tailwind v4:

@import "tailwindcss";
@import '@7onic-ui/tokens/tailwind/v4.css';

@source "../node_modules/@7onic-ui/react/dist";

• The @source path is relative to the CSS file — recompute it for the actual file location (npm route only; CLI-copied sources are scanned as normal project files).

Tailwind v3 — CSS plus config:

@import '@7onic-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js must have the preset and, on the npm route, the dist glob in content:

presets: [require('@7onic-ui/tokens/tailwind/v3-preset')],
content: ['./node_modules/@7onic-ui/react/dist/**/*.{js,mjs}', /* app globs */],

Notes that prevent common misdiagnoses: