@zedtech/zedkit-ui

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.

Stable@zedtech/zedkit-ui

Wraps: lucide-react

API key (shown once)

Install command

pnpm dlx shadcn@latest add https://zedkit.app/r/themes/volt.json

View props table

Who is it for?: Developers displaying API keys and tokens shown only once.
When should I use it?: Right after creating a credential the user must store.
When should I pick something else?: For passwords the user typed — use a password Input instead.

Use it

Simple

import { Label, SecretField } from "@zedtech/zedkit-ui";
<Label htmlFor="key">API key (shown once)</Label>
<SecretField id="key" value="zk_live_example_secret" />

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 { Label, SecretField } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Label htmlFor="key">API key (shown once)</Label>
      <SecretField id="key" value="zk_live_example_secret" />
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

The value is a read-only input (a read-only textarea with multiline), so it can be focused and selected with the keyboard. Name it: point a Label at id, or pass aria-label; the kit does not add one. The copy button is a real button named by copyLabel (a localized default otherwise). The copied state is a 2-second icon swap plus a polite live announcement. When the clipboard API is missing or writing to it fails, the same live region announces that copy failed.

DateRangePicker

Button that opens a range calendar in a popover. Closes when both days are set.

FieldSet

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