install

Three packages. Pick the one that matches your stack.

react@snowztech/ui static html@snowztech/ui-css vue · svelte · solid@snowztech/ui-css

via React

Next.js, Remix, Vite, React Router, anything with React 18+.

pnpm add @snowztech/ui

npm · yarn · bun

npm install @snowztech/ui

yarn add @snowztech/ui

bun add @snowztech/ui

Import the styles once at the root, then use components.

app/layout.tsx

import "@snowztech/ui/styles.css";

import { MarkCrystal } from "@snowztech/ui";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MarkCrystal size={32} />
        {children}
      </body>
    </html>
  );
}

Tokens only? Import @snowztech/ui/tokens.css instead.

via static HTML

One <link>. Plain pages, MDX, Astro, Hugo, anywhere.

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@snowztech/ui-css@0.2/dist/snowztech-ui.min.css">

<button class="sn-btn sn-btn--primary">Ship it</button>
<span class="sn-pulse sn-pulse--success">
  <span class="sn-pulse__dot"></span><span>online</span>
</span>

For interactive bits (copy buttons, theme toggle), add the JS file too.

<script type="module"
        src="https://cdn.jsdelivr.net/npm/@snowztech/ui-js@0.2/dist/snowztech-ui.esm.js"></script>

<button class="sn-copy-btn" data-sn-copy="hello@snowz.ai" aria-label="copy">
  <!-- icons -->
</button>

<button class="sn-theme-toggle" data-sn-theme-toggle aria-label="toggle theme">
  <span class="sn-theme-toggle__indicator"></span>
</button>

npm install (for bundlers)

pnpm add @snowztech/ui-css @snowztech/ui-js

import "@snowztech/ui-css";
import "@snowztech/ui-js/auto";

via Vue, Svelte, Solid…

Same answer: pull the CSS, render the markup. Every sn-* class works regardless of framework. A first-party Vue wrapper is on the roadmap.

<script setup>
  import "@snowztech/ui-css";
</script>

<template>
  <button class="sn-btn sn-btn--primary">Hello</button>
</template>

<script>
  import "@snowztech/ui-css";
</script>

<button class="sn-btn sn-btn--primary">Hello</button>

Theme

Dark by default. Set data-theme="light" on any ancestor to switch.

<html data-theme="light">

Persist + toggle from a button:

<button class="sn-theme-toggle" data-sn-theme-toggle aria-label="toggle theme">
  <span class="sn-theme-toggle__indicator"></span>
</button>

<!-- include @snowztech/ui-js for the wiring -->

import { ThemeToggle } from "@snowztech/ui/client";

<ThemeToggle />