Skip to content

@scenarix/jadu-ui

Jadu UI component library built on shadcn/ui with Tailwind CSS v4.

View Storybook

Installation

Note: This is a private package hosted on GitHub Packages.

1. Configure npm registry

Create or update .npmrc in your project root:

@scenarix:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_PKG_TOKEN}

2. Set up authentication

Create a GitHub Personal Access Token with read:packages scope:

export GITHUB_PKG_TOKEN=ghp_xxxxxxxxxxxx

3. Install

npm install @scenarix/jadu-ui

Quick Start

1. Configure Tailwind v4

Vite:

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

export default {
  plugins: [tailwindcss()],
};

Next.js / PostCSS:

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

2. Import styles

In your main CSS file:

@import "tailwindcss";
@import "@scenarix/jadu-ui/styles/globals.css";

@source "node_modules/@scenarix/jadu-ui/dist/**/*.js";

The @source directive tells Tailwind to scan the library for utility classes.

3. Use components

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@scenarix/jadu-ui";

export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

Available Components

Category Components
Layout Card, Separator, AspectRatio, ResizablePanel, ScrollArea
Navigation Breadcrumb, NavigationMenu, Menubar, Pagination, Tabs, Sidebar
Forms Button, Input, Textarea, Checkbox, RadioGroup, Select, Switch, Slider, Calendar, Form, InputOTP, Label
Feedback Alert, AlertDialog, Dialog, Drawer, Sheet, Tooltip, HoverCard, Popover, Toaster (Sonner), Progress, Skeleton
Data Display Accordion, Avatar, Badge, Carousel, Chart, Collapsible, Table, Toggle, ToggleGroup
Overlays Command, ContextMenu, DropdownMenu
Icons 5700+ Tabler Icons via @scenarix/jadu-ui/icons

Icons

The library includes Tabler Icons - a set of 5700+ free MIT-licensed SVG icons.

Usage

import { IconHome, IconUser, IconSettings } from "@scenarix/jadu-ui/icons";

function MyComponent() {
  return (
    <nav>
      <IconHome size={24} />
      <IconUser size={24} />
      <IconSettings size={24} />
    </nav>
  );
}

Icon Props

Prop Type Default Description
size number 24 Width and height in pixels
stroke number 2 Stroke width
color string currentColor Icon color (inherits text color)

Examples

// Different sizes
<IconCheck size={16} />
<IconCheck size={24} />
<IconCheck size={32} />

// Different stroke widths
<IconHome stroke={1} />
<IconHome stroke={2} />
<IconHome stroke={3} />

// With color
<IconHeart className="text-destructive" />
<IconStar color="#f59e0b" />

// In a button
<Button>
  <IconPlus size={16} />
  Add Item
</Button>

Browse all available icons at tabler.io/icons.

Theming

The library uses CSS custom properties for theming. Override these in your global CSS:

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 3.9%);
  --primary: hsl(0 0% 9%);
  --primary-foreground: hsl(0 0% 98%);
  /* ... see globals.css for all variables */
}

.dark {
  --background: hsl(0 0% 3.9%);
  --foreground: hsl(0 0% 98%);
  /* ... dark mode overrides */
}

Utilities

cn() - Class Name Utility

Merge Tailwind classes with conflict resolution:

import { cn } from "@scenarix/jadu-ui";

<div className={cn("px-4 py-2", isActive && "bg-primary")} />;

useIsMobile Hook

Responsive breakpoint detection:

import { useIsMobile } from "@scenarix/jadu-ui";

function MyComponent() {
  const isMobile = useIsMobile();
  return isMobile ? <MobileView /> : <DesktopView />;
}

Development

# Install all dependencies (root + playground)
npm run install:all

# Start dev mode (package watch + playground)
npm run dev:all

# Or individually:
npm run storybook        # Storybook dev server
npm run dev              # Watch package build
npm run dev:playground   # Run playground only

# Build the library
npm run build

# Build Storybook static site
npm run build:storybook

Documentation