Industry Boilerplate React

A robust, industry-standard React boilerplate package providing modular components for Auth, Dashboard, and more.

Features

• Modular Design: Import only what you need.
• Type-Safe: Built with TypeScript and Zod.
• Styled: Uses Tailwind CSS for easy customization.
• Accessible: Built on top of accessible primitives.

Installation

npm install industry-boilerplate-react

Usage

Core Components

import { Button, Input, Card } from "industry-boilerplate-react";

function App() {
  return (
    <Card>
      <Input placeholder="Enter text" />
      <Button>Submit</Button>
    </Card>
  );
}

Auth Module

import { Auth } from "industry-boilerplate-react";

function LoginPage() {
  return (
    <Auth.Login
      onSubmit={(data) => console.log(data)}
      onSignupClick={() => console.log("Navigate to signup")}
    />
  );
}

Dashboard Module

import { Dashboard } from "industry-boilerplate-react";
import { Users, DollarSign } from "lucide-react";

function DashboardPage() {
  return (
    <Dashboard.DashboardLayout
      user={{ name: "John Doe", email: "[email protected]" }}
      onLogout={() => console.log("Logout")}
    >
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Dashboard.StatsWidget
          title="Total Revenue"
          value="$45,231.89"
          trend={{ value: 20.1, label: "from last month", direction: "up" }}
          icon={<DollarSign className="h-4 w-4 text-muted-foreground" />}
        />
        <Dashboard.StatsWidget
          title="Active Users"
          value="+2350"
          trend={{ value: 180.1, label: "from last month", direction: "up" }}
          icon={<Users className="h-4 w-4 text-muted-foreground" />}
        />
      </div>
    </Dashboard.DashboardLayout>
  );
}

Customization

You can override styles using Tailwind classes via the className prop on any component.