component-lib

Reusable React component library built with TypeScript, Tailwind v4, and shadcn/ui.

Development

• npm run dev: starts local playground (index.html + src/main.tsx) for manual component testing.
• npm run build: runs typecheck, emits declaration files, and builds the library bundle.
• npm run lint: runs ESLint across the codebase.

Library Output

Build output is generated in dist/:

• dist/index.js: ESM library entry.
• dist/index.d.ts: exported TypeScript types.
• dist/styles.css: compiled styles for consumers.

Consumer Usage

import { Button } from "component-lib";
import "component-lib/styles.css";

export function Example() {
  return <Button>Click me</Button>;
}

SidebarNav In Another React Project

import * as React from "react";
import { Home, FolderKanban, Settings, LogOut } from "lucide-react";
import {
  Button,
  SidebarNav,
  type SidebarNavGroup,
  type SidebarNavItem,
} from "component-lib";
import "component-lib/styles.css";

const items: SidebarNavItem[] = [
  { label: "Home", route: "/home", icon: Home, order: 0 },
  { label: "Settings", route: "/settings", icon: Settings, order: 20 },
];

const groups: SidebarNavGroup[] = [
  {
    id: "projects",
    label: "Projects",
    icon: FolderKanban,
    order: 10,
    items: [
      { label: "Overview", route: "/projects", badge: "3" },
      { label: "Active", route: "/projects/active" },
    ],
  },
];

export function AppLayout() {
  const [activeRoute, setActiveRoute] = React.useState("/home");

  return (
    <div className="flex min-h-screen">
      <SidebarNav
        items={items}
        groups={groups}
        activeRoute={activeRoute}
        defaultCollapsed={false}
        onItemClick={(item, event) => {
          // remove this preventDefault if you want normal anchor navigation
          event.preventDefault();
          setActiveRoute(item.route);
        }}
        logo={
          <div className="flex items-center gap-2">
            <div className="size-7 rounded-md bg-primary" />
            <span className="text-sm font-semibold">My Product</span>
          </div>
        }
        footer={
          <Button
            variant="outline"
            className="w-full justify-start group-data-[collapsible=icon]:justify-center"
          >
            <LogOut />
            <span className="group-data-[collapsible=icon]:hidden">Logout</span>
          </Button>
        }
      />

      <main className="min-w-0 flex-1 p-6">
        <h1 className="text-xl font-semibold">Active route: {activeRoute}</h1>
      </main>
    </div>
  );
}

Notes:

• Import "component-lib/styles.css" once at app root.
• defaultCollapsed sets the initial sidebar state.
• onItemClick is optional. Keep href behavior, or intercept and route manually.
• groups supports one-level nested routes using collapsible SidebarGroup sections.
• order supports mixed sorting between flat items and groups (stable fallback preserves input order on ties).