Installation

Next.js

1. Create an app with Tailwind v4

   pnpm create next-app@latest my-panel --typescript --tailwind --app

2. Install the kit

   pnpm add @vamos-cms/ui

   The package ships TypeScript source. Let Next compile it:

   next.config.ts

   import type { NextConfig } from "next";
   
   const config: NextConfig = {
     transpilePackages: ["@vamos-cms/ui"],
   };
   
   export default config;

3. Import the styles
   app/globals.css

   @import "tailwindcss";
   @import "@vamos-cms/ui/styles.css";

4. Load the fonts

   The data-font axis reads --ff-* variables. Load the fonts of the presets you use:

   app/layout.tsx

   // app/layout.tsx
   import { Onest, Instrument_Serif, JetBrains_Mono } from "next/font/google";
   
   // Editorial preset. Each font exposes a --ff-* variable the tokens read.
   const onest = Onest({ subsets: ["latin", "latin-ext"], variable: "--ff-onest" });
   const instrument = Instrument_Serif({ subsets: ["latin", "latin-ext"], weight: "400", style: ["normal", "italic"], variable: "--ff-instrument" });
   const jetbrains = JetBrains_Mono({ subsets: ["latin", "latin-ext"], variable: "--ff-jetbrains" });
   const fonts = [onest, instrument, jetbrains];

5. Set the theme axes on <html>

   class="dark", data-material, data-accent, data-density and data-font. The small boot script restores the user's choice before the first paint.

   app/layout.tsx

   // Apply the theme axes before first paint (no flash).
   const boot = `try{var s=JSON.parse(localStorage.getItem("vamos-theme")||"{}");var h=document.documentElement;if(s.dark)h.classList.add("dark");h.dataset.material=s.material||"glass";h.dataset.accent=s.accent||"lime";h.dataset.density=s.density||"comfortable";h.dataset.font=s.font||"editorial"}catch(e){}`;
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html
         lang="en"
         data-material="glass"
         data-accent="lime"
         data-font="editorial"
         suppressHydrationWarning
         className={fonts.map((f) => f.variable).join(" ")}
       >
         <head>
           <script dangerouslySetInnerHTML={{ __html: boot }} />
         </head>
         <body className="min-h-dvh font-sans">{children}</body>
       </html>
     );
   }

6. Use a component

   import { Button } from "@vamos-cms/ui";
   
   export default function Page() {
     return <Button variant="primary">Publish</Button>;
   }

Other frameworks

The kit does not import next/*. In Vite or React Router, install the package, import the two stylesheets and set the same attributes on <html>. Load fonts with @fontsource or a <link> and define the --ff-* variables yourself, for example :root { --ff-onest: "Onest"; }.