Explore and preview stunning UI components from shadcn/ui and Aceternity UI. Copy-paste ready components for your next project.
- 🎨 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
- Node.js 18+ and npm/yarn/pnpm
- Git
- Clone the repository
git clone https://github.com/yourusername/stackui.git
cd stackui- Install dependencies
npm install
# or
yarn install
# or
pnpm install- Run the development server
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser
npm run build
npm start- Next.js 16 - React framework with App Router
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- React - UI library
- shadcn/ui - Re-usable components built with Radix UI
- Aceternity UI - Beautiful animated components
- Radix UI - Unstyled, accessible components
- Lucide React - Beautiful & consistent icons
- next-themes - Dark mode support
- More libraries coming soon...
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
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...
Beautiful animated components:
- Coming soon...
- Magic UI
- shadcn/ui Extensions
- Custom Animated Components
- And more...
The project includes a simple hardcoded authentication system:
Demo Credentials:
- Email:
[email protected] - Password:
password
⚠️ Note: This is a demo authentication system. For production use, implement proper authentication with services like NextAuth.js, Clerk, or Supabase Auth.
- Navigate to the Dashboard
- Choose a component library (shadcn/ui or Aceternity UI)
- Browse the component gallery
- Click on any component to see:
- Live preview
- Installation command
- Source code
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
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 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
- Website: stackui.com
- Twitter: @stackui
- Email: [email protected]
⭐ Star this repo if you find it helpful!