@zenku/ui-web

Web UI components built on shadcn/Radix with Tailwind v4. Ships TypeScript source directly — your bundler handles compilation.

Installation

npm install @zenku/ui-web

Setup

1. Tailwind v4 source scanning

Add a @source directive to your main CSS file so Tailwind scans the package for utility classes:

@source "../../node_modules/@zenku/ui-web/src/**";

Adjust the relative path based on your project structure.

2. Import styles

Import the included styles (provides theme variables and shadcn base styles):

@import "@zenku/ui-web/styles.css";

Or provide your own theme by defining the required CSS custom properties (see below).

Usage

import { Button } from "@zenku/ui-web";

// Or import individual components directly:
import { Button } from "@zenku/ui-web/components/ui/button";

// Hooks:
import { useIsMobile } from "@zenku/ui-web/hooks/use-mobile";

// Utilities:
import { cn } from "@zenku/ui-web/lib/utils";

TypeScript source

This package ships .ts and .tsx source files — there is no pre-compiled JavaScript. Your bundler must be configured to handle TypeScript. Most modern frameworks support this out of the box (Next.js, Vite, Expo).

Required CSS custom properties

If you skip @import "@zenku/ui-web/styles.css" and provide your own theme, define these custom properties on :root (and optionally .dark for dark mode):

| Property | Description | | -------------------------- | ------------------------ | | --background | Page background | | --foreground | Default text color | | --primary | Primary action color | | --primary-foreground | Text on primary | | --secondary | Secondary action color | | --secondary-foreground | Text on secondary | | --muted | Muted background | | --muted-foreground | Muted text color | | --accent | Accent background | | --accent-foreground | Text on accent | | --destructive | Destructive action color | | --destructive-foreground | Text on destructive | | --border | Border color | | --input | Input border color | | --ring | Focus ring color | | --radius | Base border radius |

License

Proprietary. See LICENSE for details.