Next.js - App Router, SSR-safe
Prominent target market. Import once, use everywhere - fluid clamp() works server and client, no hydration mismatch.
Setup - App Router
// app/layout.tsx
import './my-design-system/dist/my-design-system.min.css';
// or SCSS:
// import './my-design-system/main.scss';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html lang="en"><body>{children}</body></html>
}
// Any page or component
export default function Page() {
return <button className="my-btn">Primary</button>
}With Tailwind
Coexists. Keep Tailwind for utilities if you want - your AniStyl CSS is just another layer. Or go utilities: lean and use only AniStyl tokens.
Dark mode
// Toggle anywhere
document.documentElement.setAttribute('data-theme', 'dark');
// or read prefers-color-scheme
Every system ships a dark variant generated from your palette. Neutrals invert; brand stays.
Fonts - avoid layout shift
If you used Google Fonts in the builder, the ZIP shows a <link> alternative for layout.tsx head - better first paint than @import. See Fonts.
Optional JS
Import ani.js only if you use modal/drawer/tabs/toast. Otherwise zero JS. It’s 2 KB, no deps, and respects BEM + .is-open.
// app/layout.tsx - optional
import Script from 'next/script';
<Script src="/my-design-system/ani.js" strategy="lazyOnload" />Next: Customize · Agent Skill for AI workflows