Installation · Vizzele UI

React / Next.js

bash

pnpm add @vizzele/react @vizzele/css

Import the stylesheet once (e.g. in your root layout) and add the vz-body class to <body> to get the page canvas, typography and focus styles.

tsx

// app/layout.tsx
import '@vizzele/css';

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-theme="dark">
      <body className="vz-body">{children}</body>
    </html>
  );
}

Components are client components (they ship with 'use client'), so they work inside Server Components without wrappers. Nothing touches window at import time — SSR is safe.

Fonts

The tokens reference Bricolage Grotesque (display, variable weight / width / optical size), Geist (UI) and Geist Mono. Install them from Fontsource — or override --vz-font-display / --vz-font-sans with your own.

bash

pnpm add @fontsource-variable/bricolage-grotesque @fontsource-variable/geist @fontsource-variable/geist-mono

Vanilla JS

import '@vizzele/css';
import { magnetic, draggable, Spring } from '@vizzele/core';

magnetic(document.querySelector('.cta')!, { strength: 0.4 });
draggable(document.querySelector('.card')!, { bounds: 'parent' });

No build step: data-vz-* attributes

Drop in the CDN build and describe effects in HTML. Elements added later are picked up automatically.

html

<link rel="stylesheet" href="https://unpkg.com/@vizzele/css/dist/vizzele.min.css" />
<script src="https://unpkg.com/@vizzele/core/dist/vizzele.global.js" defer></script>

<button class="vz-button" data-variant="liquid" data-vz-magnetic="strength: 0.4">Hover</button>
<div class="vz-card vz-holo" data-vz-tilt="max: 14">Holographic</div>
<div class="vz-card" data-vz-drag="bounds: parent; elastic: 0.4">Throw me</div>

Options are written like CSS (key: value; key: value) or as JSON. The global build also exposes window.vizzele with the full imperative API.