@npatel-group/setu-ui

Internal UI component library for NPATEL GROUP LTD.

Shared React components powering SETU products and internal dashboards. Built with Radix UI primitives, Tailwind CSS, and TypeScript.

Private package for NPATEL GROUP LTD use only.

🎯 Purpose

This library provides a consistent, accessible design system for:

• SETU dashboard applications
• Internal admin panels
• Shared form patterns
• Data tables and navigation

Benefits

• Consistent styling across NPATEL projects
• Accessible by default (ARIA, keyboard navigation)
• TypeScript-first with full type definitions
• Storybook documentation for all components

🔐 Installation (Internal)

Requires access to NPATEL GROUP LTD npm organization.

npm install @npatel-group/setu-ui

Peer Dependencies

Ensure your project has:

{
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "tailwindcss": "^3.0.0"
  }
}

🚀 Quick Start

// 1. Import styles (main.tsx)
import "@npatel-group/setu-ui/dist/styles/globals.css"

// 2. Use components
import { Button, Card, Input } from "@npatel-group/setu-ui"

function Dashboard() {
  return (
    <div className="p-8 max-w-4xl mx-auto">
      <Card>
        <div className="space-y-6 p-8">
          <h1 className="text-3xl font-bold text-gray-900">
            SETU Dashboard
          </h1>
          <Input
            label="Search students"
            placeholder="Type student name..."
          />
          <Button variant="primary" className="w-full md:w-auto">
            Search
          </Button>
        </div>
      </Card>
    </div>
  )
}

⚙️ Tailwind CSS Setup

Add to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@npatel-group/setu-ui/dist/**/*.{js,mjs}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import styles once in your entry file:

import "@npatel-group/setu-ui/dist/styles/globals.css"

📋 Component Categories

| Category | Components | |----------|------------| | Forms | Button, Input, Textarea, Select, Checkbox, RadioGroup, Switch, Label | | Layout | Card, Dialog, Drawer, Popover, Accordion, Tabs | | Data | Table, Avatar, Badge | | Navigation | Breadcrumb, Pagination | | Feedback | Toast, Alert, Progress, Spinner, Skeleton | | Auth | LoginForm | | Utilities | Separator, Tooltip |

Full documentation: SETU UI-Library Documentation

📚 Storybook Documentation

Internal component documentation:

SETU UI-Library Documentation

Interactive examples, props tables, and copy-paste code for all components.

🤝 Contributing (NPATEL Engineers Only)

1. Fork / clone the internal repo
2. Create feature branch: feature/button-loading
3. Add/update Storybook stories
4. Run npm run lint, npm run test, npm run library-pack
5. Open merge request to develop

Contact: Engineering Lead for access

📄 License

Proprietary / Internal Use Only

© NPATEL GROUP LTD. All rights reserved.

This package is private and proprietary. For use by NPATEL GROUP LTD teams only.

🔗 Internal Links

| Resource | Link | |----------|------| | GitHub | NPG GitHub | | Repository | SETU UI-Library Github | | Storybook | Component Docs |

Built by the NPG Engineering Team