Zango Components

A modern React component library built with Tailwind CSS and customizable CSS variables that inherit from parent applications. Perfect for building consistent, accessible UI components across your applications.

🚀 Features

- Tailwind CSS Integration: All components use Tailwind utility classes for consistent styling
- Color Inheritance: CSS variables allow parent applications to override colors
- TypeScript Support: Full type definitions for all components
- Responsive Design: Components adapt to different screen sizes
- Accessibility: Proper ARIA attributes and keyboard navigation
- Storybook Documentation: Interactive component documentation

📦 Installation

``bash
npm install @zango/components
`




🎨 Setup

$3

Make sure you have the following peer dependencies installed:

`bash
npm install react react-dom @radix-ui/react-dialog lucide-react
`

$3

If your project uses Tailwind CSS, you can optionally add the library to your content scanning for better integration:

`js
// tailwind.config.js
module.exports = {
content: [
"./src/*/.{js,jsx,ts,tsx}",
"./node_modules/@zango/components/dist/*/.{js,jsx,ts,tsx}", // Optional: for better integration
],
theme: {
extend: {
// You can extend or override colors here
},
},
plugins: [],
}
`

Note: This step is optional. The library works perfectly without any Tailwind configuration in your project.

🎯 Usage

$3

`tsx
import { Button, Badge, Accordion } from '@zango/components';
// CSS is automatically included - no separate import needed!

function App() {
return (



);
}
`

$3

`css
/ Override colors in your CSS /
:root {
--color-Brand-500: #3b82f6;
--color-Brand-600: #2563eb;
--color-Brand-700: #1d4ed8;
}
`

`tsx
// Components will automatically use your custom colors
Custom Colored Button
`

🧩 Available Components

$3

A versatile button component with multiple variants and sizes.

`tsx
variant="primary"
size="medium"
fullWidth={false}
disabled={false}
>
Button Text

`

Props:
- variant: 'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive' | 'danger' | 'success'
- size: 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'
- fullWidth: boolean
- All standard HTML button attributes

$3

Status indicators with multiple variants.

`tsx
Success
Warning
Error
`

Props:
- variant: 'success' | 'low' | 'warning' | 'medium' | 'danger' | 'high' | 'critical' | 'neutral' | 'default' | 'outline'

$3

Expandable content sections with smooth animations.

`tsx
items={[
{
key: "item1",
title: "First Item",
content:

Content goes here

,
icon: ,
subtitle: "Optional subtitle"
}
]}
multiple={true}
collapsible={true}
/>
`

$3

Dropdown menus with customizable items.

`tsx
trigger={Open Menu}
align="right"
>
console.log('clicked')}>
Menu Item


Delete

`

$3

Flexible information display with multiple layouts.

`tsx
title="Section Title"
subtitle="Subtitle"
description="Description text"
variant="card"
size="medium"
icon={}
badge={New}
actions={Edit}
>





`

$3

Event timeline with date grouping.

`tsx
sections={[
{
date: "Today",
events: [
{
id: "1",
type: "status_change",
title: "Status Updated",
description: "Changed to active",
timestamp: "2:30 PM",
date: "Dec 15",
icon: "activity"
}
]
}
]}
/>
`

$3

Sliding panel overlay for displaying additional content.

`tsx
open={open}
onClose={() => setOpen(false)}
title="Drawer Title"
size="md"
position="right"
>


Drawer content



`

Props:
- open: boolean (required)
- onClose: () => void (required)
- size: 'sm' | 'md' | 'lg' | 'xl' | 'full'
- position: 'right' | 'left' | 'top' | 'bottom'
- title: string
- showBackButton: boolean
- onBack: () => void

Full Drawer documentation →

$3

Beautiful toast notifications powered by Sonner with customizable variants, positions, and actions.

`tsx
import { Toaster, toast, useToast } from '@zango/components';

// Add Toaster to your app root
function App() {
return (
<>



);
}

// Use toast in your components
function MyComponent() {
const { success, error, warning, info } = useToast();

return (
success('Operation successful!')}>
Show Toast

);
}
`

Toast Options:
`tsx
toast.success({
title: 'Success toast message',
description: 'Optional description text',
duration: 5000,
icon: ,
primaryAction: {
label: 'Undo',
onClick: () => console.log('Undo clicked')
},
secondaryAction: {
label: 'Dismiss',
onClick: () => console.log('Dismissed')
}
});
`

Props:
- position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
- duration: number (milliseconds)
- variant: 'success' | 'error' | 'warning' | 'info' | 'default'
- Custom icons and actions supported

🎨 Customizing Colors

The component library uses CSS variables that can be overridden in your application:

`css
:root {
/ Brand colors /
--color-Brand-500: #your-primary-color;
--color-Brand-600: #your-primary-hover;
--color-Brand-700: #your-primary-active;

/ Gray colors /
--color-Gray-100: #your-gray-light;
--color-Gray-500: #your-gray-medium;
--color-Gray-900: #your-gray-dark;

/ Status colors /
--color-success-500: #your-success-color;
--color-error-500: #your-error-color;
--color-warning-500: #your-warning-color;

/ Base colors /
--color-Base-white: #ffffff;
--color-Base-black: #000000;
}
`

🛠️ Development

$3

- Node.js (v16 or later)
- npm or yarn

$3

`bash


Clone the repository

git clone https://github.com/yourusername/zango-react-components.git
cd zango-react-components

Install dependencies

npm install

Start development server

npm run dev

Run Storybook for component development

npm run storybook

Build the library

npm run build

Type check

npm run type-check

Lint code

npm run lint
`

$3

`
src/
├── components/ # Component source files
│ ├── Button/
│ ├── Badge/
│ ├── Accordion/
│ ├── ContextMenu/
│ ├── InfoSection/
│ ├── Timeline/
│ └── Drawer/
├── styles/
│ ├── index.css # Main Tailwind CSS file
│ └── variables.css # CSS variables
├── utils/
│ └── cn.ts # Class name utility
└── index.ts # Main export file
`

$3

- npm run dev - Start development server
- npm run build - Build the library for production
- npm run storybook - Start Storybook development server
- npm run build-storybook - Build Storybook for production
- npm run type-check - Run TypeScript type checking
- npm run lint - Run ESLint

$3

`bash
npm run build
`

This creates a dist folder with:
- zango-components.js - ES module build (with CSS included)
- zango-components.umd.cjs - UMD build (with CSS included)
- Type definitions

📚 Documentation

Visit our Storybook documentation to see all components in action with interactive examples.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

📄 License

MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions:

1. Check the Storybook documentation
2. Search existing issues
3. Create a new issue if needed

---

Made with ❤️ using React, TypeScript, and Tailwind CSS