FlowTail - Modern React UI Component Library

✨ Features

• 🎨 30+ Components - All essential UI components you need
• 🎭 Smooth Animations - Powered by Framer Motion
• 🎯 TypeScript - Full type safety and IntelliSense
• 🎨 Tailwind CSS - Easily customizable with utility classes
• 📱 Responsive - Mobile-first design approach
• ♿ Accessible - ARIA compliant components
• 🚀 Tree-shakeable - Import only what you need
• 📦 Zero Config - Works out of the box

📦 Installation

npm install flowtail
# or
yarn add flowtail
# or
pnpm add flowtail

🚀 Quick Start

1. Import the CSS in your main file:

import "flowtail/styles.css";

2. Import and use components:

import { Button, Input, Modal } from "flowtail";

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input label="Email" placeholder="Enter your email" />
    </div>
  );
}

📚 Components

Form Components

• Button - Versatile button with multiple variants and sizes
• Input - Text input with labels, errors, and addons
• Select - Dropdown with search functionality
• Checkbox - Animated checkbox input
• Radio - Radio button input
• Textarea - Multi-line text input
• Switch - Toggle switch with smooth animation
• FileUpload - Drag-and-drop file upload
• IconButton - Compact icon-based button

Overlay Components

• Modal - Dialog with backdrop and animations
• Drawer - Slide-in panel from any direction
• Tooltip - Contextual information on hover
• Toast - Notification messages
• Popover - Floating content container

Data Display

• Table - Data table with sorting and pagination support
• Card - Container with header, body, and footer
• Badge - Status and category indicators
• Accordion - Collapsible content sections
• Tabs - Tabbed interface with multiple variants

Layout Components

• Container - Content wrapper with max-width
• Flex - Flexbox layout utility
• Center - Center content horizontally and vertically

Typography

• Heading - Heading component with multiple sizes
• Text - Text component with variants

Utility Components

• Loader - Multiple loading spinner variants
• Spinner - Loading spinner with customizable size
• Pagination - Navigate through pages of data
• Datepicker - Calendar date picker
• Image - Enhanced image component

💡 Usage Examples

Button

import { Button } from "flowtail";

<Button variant="primary" size="md" isLoading={false}>
  Click me
</Button>;

Modal with Toast

import { Modal, Button, ToastProvider, useToast } from "flowtail";

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
  const { toast } = useToast();

  return (
    <ToastProvider>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="My Modal">
        <p>Modal content here</p>
        <Button
          onClick={() => toast({ title: "Success!", variant: "success" })}
        >
          Show Toast
        </Button>
      </Modal>
    </ToastProvider>
  );
}

Table

import { Table } from "flowtail";

const data = [
  { id: 1, name: "John", email: "[email protected]" },
  { id: 2, name: "Jane", email: "[email protected]" },
];

const columns = [
  { key: "id", header: "ID" },
  { key: "name", header: "Name" },
  { key: "email", header: "Email" },
];

<Table data={data} columns={columns} striped hoverable />;

Select with Search

import { Select } from "flowtail";

const options = [
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2" },
  { value: "3", label: "Option 3" },
];

<Select
  label="Choose an option"
  options={options}
  searchable
  onChange={(value) => console.log(value)}
/>;

🎨 Customization

All components accept a className prop for custom styling:

<Button className="custom-class">Custom Button</Button>

Tailwind CSS classes work seamlessly:

<Card className="shadow-xl hover:shadow-2xl">
  <CardBody>Custom styled card</CardBody>
</Card>

🔧 Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build:lib

# Build demo
npm run build

📄 License

MIT © BSA

📖 Documentation

• Quick Start Guide - Get started in 5 minutes
• Full Documentation - Complete component reference
• Publishing Guide - How to publish to npm
• Changelog - Version history
• Project Structure - Architecture overview

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

For issues and questions, please open an issue on GitHub.

🎯 Live Demo

Run the development server to see all components in action:

npm run dev

Then open http://localhost:5173 in your browser.

Made with ❤️ using React, Tailwind CSS, and Framer Motion