@cisseui/react-components

A modern React component library featuring Table, Modal, and Drawer components. Built with TypeScript and styled with Tailwind CSS.

📚 Documentation

Table des matières

1. Installation
2. Quick Start
3. Components
   • Modal Component
   • Drawer Component
   • Table Component
4. Features
5. Customization
6. Props
   • Table Props
   • TableHead Props
   • TableHeadCell Props
   • TableCell Props
7. License

📦 Installation

1npm install @cisseui/react-components
2# or
3yarn add @cisseui/react-components
4# or
5pnpm add @cisseui/react-components

🚀 Quick Start

1import { Modal, Drawer, Table } from '@cisseui/react-components';

🛠️ Components

Modal Component

A flexible modal dialog component with customizable content, animations, and backdrop.

1import { Modal } from '@cisseui/react-components';
2
3function App() {
4  const [isOpen, setIsOpen] = useState(false);
5
6  return (
7    <>
8      <button onClick={() => setIsOpen(true)}>Open Modal</button>
9      
10      <Modal 
11        isOpen={isOpen}
12        onClose={() => setIsOpen(false)}
13        title="Example Modal"
14      >
15        <div className="p-6">
16          <h2>Modal Content</h2>
17          <p>This is an example modal dialog</p>
18        </div>
19      </Modal>
20    </>
21  );
22}

Drawer Component

A sliding drawer component that can appear from any edge of the screen.

1import { Drawer } from '@cisseui/react-components';
2
3function App() {
4  const [isOpen, setIsOpen] = useState(false);
5
6  return (
7    <>
8      <button onClick={() => setIsOpen(true)}>Open Drawer</button>
9      
10      <Drawer 
11        isOpen={isOpen}
12        onClose={() => setIsOpen(false)}
13        title="Example Drawer"
14        position="right"
15      >
16        <div className="p-6">
17          <h2>Drawer Content</h2>
18          <p>This is an example drawer</p>
19        </div>
20      </Drawer>
21    </>
22  );
23}

Table Component

A modern and flexible table component with support for custom styling, dark mode, and responsive design.

1import {
2  Table,
3  TableHead,
4  TableBody,
5  TableRow,
6  TableCell,
7  TableHeadCell,
8} from '@cisseui/react-components';
9
10function App() {
11  const data = [
12    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
13    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
14    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
15  ];
16
17  return (
18    <Table>
19      <TableHead>
20        <TableRow>
21          <TableHeadCell>ID</TableHeadCell>
22          <TableHeadCell>Name</TableHeadCell>
23          <TableHeadCell>Email</TableHeadCell>
24          <TableHeadCell>Role</TableHeadCell>
25        </TableRow>
26      </TableHead>
27      <TableBody>
28        {data.map((row) => (
29          <TableRow key={row.id}>
30            <TableCell>{row.id}</TableCell>
31            <TableCell>{row.name}</TableCell>
32            <TableCell>{row.email}</TableCell>
33            <TableCell>{row.role}</TableCell>
34          </TableRow>
35        ))}
36      </TableBody>
37    </Table>
38  );
39}

Props

Table

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	ReactNode	-	Table content

TableHead

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	ReactNode	-	Header content

TableHeadCell

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	ReactNode	-	Cell content

TableCell

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	ReactNode	-	Cell content

✨ Features

• 🎨 Modern design with Tailwind CSS
• 🌙 Dark mode support
• 📱 Responsive and mobile-friendly
• ♿ Accessible (ARIA compliant)
• 🔒 TypeScript support
• 🎯 Zero-dependency (except for React and Tailwind)
• 🚀 Tree-shakeable
• 📦 Small bundle size

🎨 Customization

All components can be customized using:

1. Tailwind Classes: Use the className prop to extend or override default styles
2. Theme: Components automatically adapt to your Tailwind theme configuration
3. Props: Each component has specific props for customization

🔧 Props

Modal

Prop	Type	Default	Description
isOpen	boolean	false	Controls the visibility of the modal
onClose	() => void	-	Callback when modal is closed
title	string	-	Modal title
children	ReactNode	-	Modal content
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Modal size

Drawer

Prop	Type	Default	Description
isOpen	boolean	false	Controls the visibility of the drawer
onClose	() => void	-	Callback when drawer is closed
title	string	-	Drawer title
children	ReactNode	-	Drawer content
position	'left' | 'right' | 'top' | 'bottom'	'right'	Drawer position
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Drawer size

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.