---

✨ Features

• 🎨 Beautiful Component Library - Curated collection from shadcn/ui and Aceternity UI
• 📋 Copy-Paste Ready - Easy to integrate components with installation commands
• 🌓 Dark Mode Support - Full dark/light theme support out of the box
• 📱 Fully Responsive - Mobile-first design for all screen sizes
• 🔍 Live Preview - See components in action before using them
• 🚀 Modern Stack - Built with Next.js 16, TypeScript, and Tailwind CSS
• 📦 Component Collections - Multiple UI libraries in one place
• 🎯 Developer Friendly - Clean code structure and easy navigation

---

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Git

Installation

1. Clone the repository

git clone https://github.com/yourusername/stackui.git
cd stackui

1. Install dependencies

npm install
# or
yarn install
# or
pnpm install

1. Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev

1. Open http://localhost:3000 in your browser

Build for Production

npm run build
npm start

---

🛠️ Tech Stack

Core

• Next.js 16 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• React - UI library

UI Components

• shadcn/ui - Re-usable components built with Radix UI
• Aceternity UI - Beautiful animated components
• Radix UI - Unstyled, accessible components
• Lucide React - Beautiful & consistent icons

Additional Libraries

• next-themes - Dark mode support
• More libraries coming soon...

---

📁 Project Structure

stackui/
├── app/                      # Next.js App Router
│   ├── (public)/            # Public pages (homepage)
│   ├── dashboard/           # Dashboard pages (protected)
│   │   ├── shadcn/         # shadcn/ui components gallery
│   │   └── aceternity/     # Aceternity UI components gallery
│   ├── layout.tsx          # Root layout with metadata
│   └── globals.css         # Global styles
├── components/
│   ├── ui/                 # shadcn/ui primitives (46 components)
│   ├── demos/              # Demo components
│   │   └── shadcn/        # shadcn component demos (44 files)
│   ├── layout/            # Layout components (navbar, sidebar)
│   └── shared/            # Shared utility components
├── lib/
│   ├── registries/        # Component registries
│   │   ├── shadcn.ts     # shadcn/ui component registry
│   │   └── aceternity.ts # Aceternity UI component registry
│   ├── code-helpers.ts   # Code extraction helpers
│   └── utils.ts          # Utility functions
├── public/                # Static assets
│   ├── logo.png          # StackUI logo
│   ├── favicon-48.png    # Favicon
│   └── preview.png       # OG image for social sharing
└── hooks/                # Custom React hooks

---

🎨 Component Libraries

shadcn/ui Components

44+ production-ready components including:

• Accordion, Alert, Alert Dialog
• Avatar, Badge, Breadcrumb
• Button, Calendar, Card
• Carousel, Checkbox, Collapsible
• Command, Dialog, Drawer
• Dropdown Menu, Form, Input
• Navigation Menu, Popover, Select
• Sheet, Sidebar, Table
• Tabs, Tooltip, and more...

Aceternity UI Components

Beautiful animated components:

• Coming soon...

🔜 More Libraries Coming Soon

• Magic UI
• shadcn/ui Extensions
• Custom Animated Components
• And more...

---

🌐 Authentication

The project includes a simple hardcoded authentication system:

Demo Credentials:

• Email: demo@stackui.com
• Password: password

⚠️ Note: This is a demo authentication system. For production use, implement proper authentication with services like NextAuth.js, Clerk, or Supabase Auth.

---

📝 Usage

Browsing Components

1. Navigate to the Dashboard
2. Choose a component library (shadcn/ui or Aceternity UI)
3. Browse the component gallery
4. Click on any component to see:
   • Live preview
   • Installation command
   • Source code

Copying Components

Each component page includes:

• Installation Command - npx command to install component and dependencies
• Source Code - Complete component code ready to copy
• Live Preview - Interactive demonstration

---

🤝 Contributing

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

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

---

📄 License

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

---

🙏 Acknowledgments

• shadcn for the amazing shadcn/ui library
• Aceternity UI for beautiful animated components
• Vercel for Next.js and hosting platform
• All contributors who help improve this project

---

📧 Contact

• Website: stackui.com
• Twitter: @stackui
• Email: hello@stackui.com

---