Skip to content

metesahankurt/stack-ui

Repository files navigation

StackUI

Beautiful UI Components, Ready to Copy & Paste

Explore and preview stunning UI components from shadcn/ui and Aceternity UI. Copy-paste ready components for your next project.

Next.js TypeScript Tailwind CSS License

Live Demo · Report Bug · Request Feature


✨ 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

UI Components

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:

⚠️ 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


Made with ❤️ by the StackUI Team

⭐ Star this repo if you find it helpful!

About

Explore and preview stunning UI components from shadcn/ui and Aceternity UI. Copy-paste ready components for your next project.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors