@zedtech/zedkit-ui

FieldSet

Fieldsets, field rows, labels, descriptions and error lists.

Stable@zedtech/zedkit-ui

Wraps: Label, Separator

Who is it for?: Developers structuring long or grouped forms.
When should I use it?: To group related fields with legends and per-field errors.
When should I pick something else?: For validation logic itself — pair with Form instead.

Use it

Simple

import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldSet } from "@zedtech/zedkit-ui";
<FieldSet><FieldGroup><Field>
<FieldLabel>Name</FieldLabel><FieldDescription>Public.</FieldDescription>
<FieldError errors={[{ message: "Too short." }]} />
</Field></FieldGroup></FieldSet>

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 { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldSet } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <FieldSet><FieldGroup><Field>
      <FieldLabel>Name</FieldLabel><FieldDescription>Public.</FieldDescription>
      <FieldError errors={[{ message: "Too short." }]} />
      </Field></FieldGroup></FieldSet>
    </main>
  );
}

Package version 2.0.1.

Props

No props of its own. It accepts the native attributes below.

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

FieldError uses role="alert". Field row gap is gap-field. FieldContent stack gap is gap-field-content.

SecretField

A read-only shown-once value with one-click copy; `multiline` wraps long values (install commands, snippets) so they read in full on a phone.

Dialog

Accessible modal dialogs (trigger, content, title, footer) with focus trap and Escape.