✨ Features

• 🎯 Production-Ready - Battle-tested components ready for your next project
• 🎨 Beautiful Animations - Smooth, physics-based animations powered by Framer Motion
• 🌓 Dark Mode Support - Full theme support with automatic dark/light mode switching
• ⚡ TypeScript First - Built with TypeScript for type safety and better DX
• 🎭 Customizable - Easily customize components with Tailwind CSS
• 📦 CLI Tool - Install components individually with our CLI
• ♿ Accessible - Built with accessibility in mind
• 🚀 Zero Config - Works out of the box with sensible defaults

🚀 Installation

Prerequisites

• Node.js 16+
• React 18+
• Tailwind CSS 3+

Quick Start

# Install the CLI globally
npm install -g modern-ui-kit

# Or use npx (no installation required)
npx biba-ui add

Manual Installation

1. Install dependencies:

npm install framer-motion lucide-react class-variance-authority clsx tailwind-merge

2. Copy the component files from the components/ui directory into your project

3. Make sure you have the required Tailwind CSS configuration

🎨 Components

Neo-Brutal Button

A high-contrast button with hard shadows and click displacement effect. Perfect for bold, modern interfaces.

import { NeoButton } from '@/components/ui/neo-button';

<NeoButton variant="neo" size="lg">
  Click me
</NeoButton>

Glow Card

An interactive card that tracks mouse movement to create a stunning spotlight gradient effect.

import { GlowCard } from '@/components/ui/glow-card';

<GlowCard>
  <h3>Your content here</h3>
</GlowCard>

Animated Tabs

Tab navigation with a fluid background element and smooth animations.

import { AnimatedTabs } from '@/components/ui/animated-tabs';

<AnimatedTabs
  tabs={[
    { id: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
    { id: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
  ]}
/>

Dynamic Island

A shape-shifting container inspired by iOS Dynamic Island that morphs between states.

import { DynamicIsland } from '@/components/ui/dynamic-island';

<DynamicIsland
  state="compact"
  onStateChange={(state) => console.log(state)}
/>

Liquid Cursor

A gooey, organic cursor effect using SVG filters and physics-based animations.

import { LiquidCursor } from '@/components/ui/liquid-cursor';

<LiquidCursor />

Spotlight

A dramatic spotlight effect that follows your content, perfect for hero sections.

import { Spotlight } from '@/components/ui/spotlight';

<Spotlight className="-top-40 left-0" fill="white" />

📖 Usage

Using the CLI

The easiest way to add components to your project:

# Interactive mode - choose components from a list
npx biba-ui add

# Add specific components
npx biba-ui add neo-button glow-card

# Add all components
npx biba-ui add --all

Manual Import

Copy the component files from components/ui and import them in your project:

import { NeoButton } from '@/components/ui/neo-button';
import { GlowCard } from '@/components/ui/glow-card';

function App() {
  return (
    <div>
      <GlowCard>
        <h2>Welcome to Biba UI</h2>
        <NeoButton>Get Started</NeoButton>
      </GlowCard>
    </div>
  );
}

🛠️ Tech Stack

• React - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling
• Framer Motion - Animations
• Vite - Build tool
• class-variance-authority - Component variants
• Lucide React - Icons

🎯 Roadmap

• [ ] Add more components (Accordion, Carousel, Modal, etc.)
• [ ] Create Figma design kit
• [ ] Add Storybook documentation
• [ ] Create video tutorials
• [ ] Add more animation presets
• [ ] Create VS Code extension
• [ ] Add component playground

🤝 Contributing

We love contributions! Whether it's bug reports, feature requests, or code contributions - all are welcome!

How to Contribute

1. Fork the repository

   git clone https://github.com/adityayaduvanshi/biba-ui.git

2. Create a new branch

   git checkout -b feature/amazing-component

3. Make your changes

   • Add your component to components/ui/
   • Update documentation
   • Add demo to src/components/demos/

4. Test your changes

   npm run dev

5. Commit and push

   git add .
   git commit -m "feat: add amazing component"
   git push origin feature/amazing-component

6. Open a Pull Request

Development Setup

# Clone the repo
git clone https://github.com/adityayaduvanshi/biba-ui.git
cd biba-ui

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

Component Guidelines

• Use TypeScript for all components
• Include proper prop types and documentation
• Follow the existing code style
• Add animations using Framer Motion
• Ensure dark mode compatibility
• Make components accessible (ARIA labels, keyboard navigation)

📝 License

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

💖 Acknowledgments

• Inspired by shadcn/ui
• Built with Framer Motion
• Styled with Tailwind CSS

🌟 Show Your Support

If you like this project, please give it a ⭐️ on GitHub!

📧 Contact

• Twitter: @fixslyrr
• GitHub: @adityayaduvanshi