@zedtech/zedkit-ui

Surface

One panel surface: solid card, popover or glass, elevation `0`–`3` with token shadows, border, radius and optional padding.

alpha@zedtech/zedkit-ui

Wraps: surface.css, variant="glass"

Solid panel

Border, card fill, and shadow-md from one Surface.

Glass panel

Frosted under the glass identity; solid popover elsewhere.

View props table

Who is it for?: Developers building floating panels or composing kit overlays.
When should I use it?: Custom panels that should match Dialog, Drawer, Card, and Popover chrome; floating assistant triggers via `WidgetButton`. Pass `depth` (not with glass) to wrap the panel in a parallax layer.
When should I pick something else?: Marketing page sections — use `@zedtech/zedkit-ui/marketing` `GlassSurface` instead.

Use it

Examples import from the package. With copied source, import from @/components/ui/surface instead.

Solid card panel

import { Surface } from "@zedtech/zedkit-ui";
<Surface variant="solid" elevation={2} radius="xl" padding="md">Summary</Surface>

Kit not installed yet?

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

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Surface variant="solid" elevation={2} radius="xl" padding="md">Summary</Surface>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Presentational wrapper — name regions with headings or aria-label. WidgetButton is a normal button (outline variant) with pill radius and card elevation.

Troubleshooting

Glass looks solid — frost applies only under the glass identity (`data-identity="glass"`). Dialog, Drawer and Card copy-paste payloads pull this brick in; add `surface` on its own for a custom panel.

FourStates

One host per state: Spinner, EmptyState, ErrorState, then the filled list.

ToolCallRow

Render a live assistant log from collapsed tool-call rows, thinking text, finished markdown, and grouped consecutive tool calls.