@zedtech/zedkit-ui

Stack

Gap-based vertical/horizontal stacks plus titled sections, with optional proximity scroll-snap. Gaps are role-named only.

Stable@zedtech/zedkit-ui

Wraps: Heading, Text

Team

Who can access.

Ada

View props table

Who is it for?: Developers laying out kit pages without raw divs.
When should I use it?: For all kit-page layout instead of hand-written flex. Bleed sections step up one rhythm step in wide `zk-query` slots.
When should I pick something else?: For complex grids — use CSS grid directly instead. For motion/enter animations, use the motion utilities, not `SectionScroll`.

Use it

Simple

import { Section, SectionScroll, Stack } from "@zedtech/zedkit-ui";
<SectionScroll>
  <Section title="Team" description="Who can access.">
    <Stack direction="horizontal" gap="sm">...</Stack>
  </Section>
  <Section snap="none" title="Long band">...</Section>
</SectionScroll>

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.

Install

Terminal

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

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}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

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

4
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";
```

Import and render

src/app/page.tsxReplace the contents

import { Section, SectionScroll, Stack } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <SectionScroll>
        <Section title="Team" description="Who can access.">
          <Stack direction="horizontal" gap="sm">...</Stack>
        </Section>
        <Section snap="none" title="Long band">...</Section>
      </SectionScroll>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Stack renders a plain div with no role. Section renders a section landmark named by its string title, with that title as a level-2 heading: use one title per region, keep heading levels in order, and do not repeat a title that a nearby landmark already uses. SectionScroll is a plain div; snap and smooth scrolling apply only when prefers-reduced-motion is no-preference.

WizardSteps

Step indicator plus selectable option cards with state.

Container

Named container widths and edge-to-edge section bands from the layout token scale. `query` makes the container a sizing slot for adaptive components.