Basit UI

Basit UI is a professional, reusable React & Tailwind CSS admin framework extracted from the Ispahani Banglabid project.

It is designed similarly to Shadcn UI: instead of importing bloated npm modules, you use a CLI to scaffold the exact code into your project (src/components/basit-ui/...), giving you 100% control over the styling, layout, and logic.

It provides a complete Layout system, Access Control, generic Tables, Forms, Modals, and Dashboard widgets out of the box. The default theme uses the exact Ispahani Color Palette (brand-green, brand-orange).

📦 Installation (CLI Scaffolding)

Instead of installing basit-ui as a standard runtime dependency, you use npx to add the raw components into your project.

1. Initialize your Tailwind Config

Ensure your project has the required colors. Update your tailwind.config.ts (or globals.css if using Tailwind v4):

@theme {
  --color-primary: #0a7c3f; /* Ispahani brand-green */
  --color-brand-green: #0a7c3f;
  --color-brand-orange: #f26422;
  --background: #ffffff;
  --foreground: #171717;
}

2. Scaffold Components

Run the CLI directly in your terminal to copy the modules you want. The files will be placed in src/components/basit-ui/.

# Add the core responsive Sidebar, Header, and Admin Layout
npx basit-ui@latest add layout

# Add the dummy data (including the Ispahani Menu items) and shared types
npx basit-ui@latest add shared

# Add the advanced Role-Based Access Control wrappers
npx basit-ui@latest add access-control

# Add the powerful Table component (with built-in pagination & actions)
npx basit-ui@latest add components/table

# Add complete modules (like the Role Management page)
npx basit-ui@latest add modules/role-management

(Note: Ensure you have lucide-react and clsx/tailwind-merge installed in your project).

🚀 Quick Start: Building your Admin Panel

Once you've run the scaffolding commands above, the components are sitting directly in your source code. Here is how you wire them together.

1. Setup the Layout (src/app/ClientLayout.tsx)

Use the locally scaffolded AdminLayout and AccessProvider. You can pass in the pre-configured dummyMenu we scaffolded in the shared folder!

"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import { AdminLayout } from "../components/basit-ui/layout/AdminLayout";
import { AccessProvider } from "../components/basit-ui/access-control/AccessProvider";
import { dummyMenu } from "../components/basit-ui/shared/dummy-data/menu";
import { User } from "../components/basit-ui/shared/types";

// Mock logged-in user
const dummyUser: User = {
  id: "1",
  name: "Super Admin",
  email: "[email protected]",
  role: { id: "admin", name: "SUPER_ADMIN", permissions: [] },
};

export function ClientLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <AccessProvider user={dummyUser}>
      <AdminLayout
        user={dummyUser}
        items={dummyMenu as any}
        pathname={pathname}
        brandName="ISPAHANI"
        brandSubtitle="বাংলাবিদ"
        linkComponent={Link as any}
      >
        {children}
      </AdminLayout>
    </AccessProvider>
  );
}

2. Create a Page using the Scaffoled Table (src/app/users/page.tsx)

You have full access to BasitTable now. Since it's in your repository, you can customize the table's exact CSS whenever you want.

"use client";

import { PageContainer } from "../../components/basit-ui/layout/PageContainer";
import { BasitTable } from "../../components/basit-ui/components/table/BasitTable";
import { TableActions } from "../../components/basit-ui/components/table/TableActions";
import { dummyUsers } from "../../components/basit-ui/shared/dummy-data/users";

export default function UsersPage() {
  const columns = [
    { key: "name", label: "Name" },
    { key: "email", label: "Email" },
    { key: "role.name", label: "Role", render: (user: any) => user.role?.name },
    { key: "status", label: "Status", render: () => "Active" },
    { 
      key: "actions", 
      label: "Actions", 
      className: "text-right",
      render: (user: any) => (
        <div className="flex justify-end">
          <TableActions 
            onEdit={() => console.log("Edit", user.id)}
            onDelete={() => console.log("Delete", user.id)}
          />
        </div>
      )
    },
  ];

  return (
    <PageContainer title="User Management" description="Manage all users.">
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <BasitTable
          columns={columns}
          data={dummyUsers}
          keyExtractor={(item: any) => item.id}
        />
      </div>
    </PageContainer>
  );
}

3. Protecting Routes or Components

Use PermissionGuard (which is now stored locally at src/components/basit-ui/access-control/PermissionGuard.tsx) to hide buttons from unauthorized users.

import { PermissionGuard } from "../../components/basit-ui/access-control/PermissionGuard";

export function RestrictedButton() {
  return (
    <PermissionGuard action="delete" subject="users" fallback={<p>No Access</p>}>
      <button className="bg-red-500 text-white">Delete User</button>
    </PermissionGuard>
  );
}

🛠 Customization

Because Basit UI acts like Shadcn UI, you own the code.

Want to change the gap between the child menu items in the Sidebar? Just open src/components/basit-ui/layout/Sidebar.tsx and adjust the Tailwind classes (e.g. change space-y-1 to space-y-2)! There are no hidden npm modules restricting you.