@zedtech/zedkit-ui

IconLabel

Fixed-size muted icon + label row; icon is `aria-hidden`, label stays readable.

Stable@zedtech/zedkit-ui

Wraps: lucide-react

Spring campaign

Landing page, launch email and three social posts.

Harbor StudioDue Nov 144 members12 comments

View props table

Who is it for?: Developers pairing a small decorative icon with a text label (chips, table cells).
When should I use it?: Recognition hints next to names or actions, not in running prose.
When should I pick something else?: Standalone icons — use the Lucide component directly; primary actions — use `Button`.

Use it

Examples import from the package. With copied source, import from @/components/ui/icon-label instead.

Project details

import { Calendar, FolderOpen, MessageSquare, Users } from "lucide-react";
import { IconLabel } from "@zedtech/zedkit-ui";

<IconLabel icon={FolderOpen}>Harbor Studio</IconLabel>
<IconLabel icon={Calendar}>Due Nov 14</IconLabel>
<IconLabel icon={Users}>4 members</IconLabel>
<IconLabel icon={MessageSquare}>12 comments</IconLabel>

In an order list

#1042Linen shirt, size M
Delivered Oct 22
#1043Canvas tote bag
Shipped Oct 25
#1044Ceramic mug set (4)
Packing
#1045Wool scarf, grey
Return requested

import { Package, RotateCcw, Truck } from "lucide-react";
import { IconLabel } from "@zedtech/zedkit-ui";

<IconLabel icon={Truck}>Shipped Oct 25</IconLabel>
<IconLabel icon={Package}>Packing</IconLabel>
<IconLabel icon={RotateCcw}>Return requested</IconLabel>

Home areas

Four areas. The icon is decorative; the name stays.

Build a UICore & serverImprove SEOSet up coding agents

import { Bot, LayoutDashboard, Server, TrendingUp } from "lucide-react";
import { IconLabel } from "@zedtech/zedkit-ui";

<IconLabel icon={LayoutDashboard}>Build a UI</IconLabel>
<IconLabel icon={Server}>Core & server</IconLabel>
<IconLabel icon={TrendingUp}>Improve SEO</IconLabel>
<IconLabel icon={Bot}>Set up coding agents</IconLabel>

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 lucide-react @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 { Calendar, FolderOpen, MessageSquare, Users } from "lucide-react";
import { IconLabel } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <IconLabel icon={FolderOpen}>Harbor Studio</IconLabel>
      <IconLabel icon={Calendar}>Due Nov 14</IconLabel>
      <IconLabel icon={Users}>4 members</IconLabel>
      <IconLabel icon={MessageSquare}>12 comments</IconLabel>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Icon is decorative (aria-hidden, not focusable); put the readable name in children. The muted colour keeps normal text contrast on every identity, but do not rely on the icon alone to carry meaning — the state or name must also be written.

Troubleshooting

The icon does not appear — pass the component itself (`icon={Calendar}`), not an element (`icon={<Calendar />}`). Icon too small or too large — the size is `size-icon`; override with `className`. Long text overflows a narrow cell — the label shrinks inside flex parents, give the parent a width or let the row wrap (`flex-wrap`). Meaning is lost for a screen reader — the icon is hidden on purpose, so write the state in the text.

Toaster

A root toaster plus toast() calls for transient notifications.

Form

Validated forms (schema, field errors, pending submit) on react-hook-form + zod.