@zedtech/zedkit-ui
Surface
alpha
One panel surface: solid card, popover or glass, elevation `0`–`3` with token shadows, border, radius and optional padding.
Solid panel
Border, card fill, and shadow-md from one Surface.
- 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`.
- When should I pick something else?
- Marketing page sections — use `@zedtech/zedkit-ui/marketing` `GlassSurface` instead.
Install or copy
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-uiLoad 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}";Import and render
src/app/page.tsxReplace the contentsimport { Surface, WidgetButton } from "@zedtech/zedkit-ui"; export default function Page() { return ( <main className="p-8"> <Surface variant="solid" elevation={2} radius="xl" padding="md">Summary</Surface> <WidgetButton aria-label="Open assistant">Ask</WidgetButton> </main> ); }
Package version 1.6.2.
Usage and states
import { Surface, WidgetButton } from "@zedtech/zedkit-ui";
<Surface variant="solid" elevation={2} radius="xl" padding="md">Summary</Surface>
<WidgetButton aria-label="Open assistant">Ask</WidgetButton>Wraps: surface.css, variant="glass"
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.