Skip to content
zedkit
@zedtech/zedkit-ui

Theme

One CSS import plus a source line gives the full token set; `next-themes` (install it alongside the kit) toggles the `dark` class.

Stable@zedtech/zedkit-ui

Wraps: tailwindcss, next-themes

Orders this week
1,284
+8%
3 late
Oct 20–26
Orders this week
1,284
+8%
3 late
Oct 20–26
Who is it for?
Teams starting a React 19 + Tailwind v4 admin app who want dark/light design tokens without setup.
When should I use it?
As the first install in every app using the kit.
When should I pick something else?
For apps with their own design system — use your tokens instead of fighting these.

Use it

Set up the theme
import "./globals.css";
import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
Globals CSS
@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";

Tokens in your own component

Releases
  • Storefront 4.12
    Deployed
  • Checkout 2.3
    Rolled back
  • Search index
    Deployed

Updated 4 minutes ago

import { ArrowUpRight } from "lucide-react";
import { Badge, Text } from "@zedtech/zedkit-ui";

export function ReleaseRow({ name }: { name: string }) {
  return (
    <li className="flex items-center justify-between gap-stack-md border-b border-border bg-muted pad-row text-dense">
      <Text as="span" className="content-shrink truncate">{name}</Text>
      <Badge variant="success" className="gap-stack-tight">
        <ArrowUpRight className="size-mini" aria-hidden />
        Deployed
      </Badge>
    </li>
  );
}

Dark theme button

Appearance

Choose how the dashboard looks on this device.

"use client";

import { useTheme } from "next-themes";
import { Button } from "@zedtech/zedkit-ui";

export function DarkThemeButton() {
  const { resolvedTheme, setTheme } = useTheme();
  const dark = resolvedTheme === "dark";
  return (
    <Button variant="outline" aria-pressed={dark} onClick={() => setTheme(dark ? "light" : "dark")}>
      Dark theme
    </Button>
  );
}

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get
Every component from one import, with the theme tokens included. Updates arrive with your package manager.
You need
  • React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

  1. Install

    Terminal
    pnpm add @zedtech/zedkit-ui next-themes @fontsource-variable/inter @fontsource-variable/space-grotesk

  2. Load the styles

    Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

    src/app/globals.cssReplace the contents
    @import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";

  3. Load the fonts

    The Glass look uses Inter and Space Grotesk; these imports self-host them.

    src/app/fonts.tsCreate the file
    import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";

  4. Import and render

    src/app/layout.tsxReplace the contents
    import { ThemeProvider } from "next-themes";
import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning data-identity="glass">
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Package version 2.0.1.

Accessibility

Text and control colours keep at least 4.5:1 contrast (3:1 for focus rings and borders) in light and dark, and the checks run on each preview. Dark mode is chosen by the dark class, so it follows the setting you store, not only the system. Use the semantic utilities (text-muted-foreground, text-destructive), never a fixed colour, so both themes keep their contrast. Do not rely on colour alone: the status words in the examples ("Deployed", "Rolled back") carry the meaning.

Troubleshooting

Components render unstyled — the `@source` line is missing in `globals.css`, so Tailwind never scans the kit. Dark mode does nothing — the `dark` class must be on `<html>` (next-themes `attribute="class"`), not on `<body>`. A flash of the wrong theme on load — keep `suppressHydrationWarning` on `<html>` and let `ThemeProvider` set the class before paint. Utilities such as `bg-primary` have no effect — `globals.css` drifted from the Globals CSS snippet below; restore its three lines in order. A colour looks wrong in dark — a fixed colour (`text-gray-500`) was used; switch to a semantic token.

Alert

Notice/error callouts with title and description.

Localize kit chrome in English or French

One provider plus typed en/fr bundles for kit chrome; backed by `createMessagesContext` from `@zedtech/zedkit-i18n/react`. A per-host label prop still wins.

On this page

PreviewGuidanceUse itKit not installed yet?AccessibilityRelatedTroubleshooting