🏠 Browse the knowledge base: prompts.wine

A modern Next.js 15+ project showcasing a beautiful component library with shadcn/ui components, built with TypeScript, Tailwind CSS v4, and featuring a sleek dark theme by default.

• 🚀 Next.js 15+ with App Router and Turbopack support
• 🎨 Tailwind CSS v4 for modern utility-first styling
• 🌟 shadcn/ui components with custom theming
• 🌙 Dark theme configured as default
• 📱 Responsive design with mobile-first approach
• 🔧 TypeScript for type safety
• 📦 Static export configuration ready
• ✨ ESLint & Prettier with strict rules
• 🎭 Component showcase with interactive examples

• Node.js 18+
• npm, yarn, pnpm, or bun

1. Clone the repository

git clone <repository-url>
cd prompts-wine

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install

3. Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

prompts-wine/
├── src/
│   ├── app/
│   │   ├── components/      # Components showcase page
│   │   ├── globals.css      # Global styles & CSS variables
│   │   ├── layout.tsx       # Root layout
│   │   └── page.tsx         # Homepage
│   ├── components/
│   │   └── ui/             # shadcn/ui components
│   │       ├── button.tsx
│   │       ├── tabs.tsx
│   │       ├── scroll-area.tsx
│   │       ├── collapsible.tsx
│   │       └── file-tree.tsx
│   ├── lib/
│   │   └── utils.ts        # Utility functions
│   └── hooks/              # Custom React hooks
├── public/                 # Static assets
├── components.json         # shadcn/ui configuration
└── content/               # Content files

This project includes a comprehensive set of shadcn/ui components:

• Button - Multiple variants (default, secondary, outline, ghost) with sizes
• Tabs - Nested navigation with smooth transitions
• ScrollArea - Custom scrollable content areas
• Collapsible - Expandable/collapsible content sections
• FileTree - Interactive file/folder tree component

Visit /components to see all components in action with live examples.

• npm run dev - Start development server with Turbopack
• npm run build - Build for production with static export
• npm start - Start production server
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues automatically
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting
• npm run type-check - Run TypeScript type checking

This project is configured for static export with:

• output: "export" in next.config.ts
• trailingSlash: true for proper routing
• unoptimized: true for images

Using the latest Tailwind CSS v4 with:

• CSS variables for theming
• Custom color palette
• Dark theme as default
• Responsive design system

Components are configured with:

• TypeScript support
• CSS variables for theming
• Custom aliases for imports
• Slate base color scheme

The project uses a comprehensive theming system with CSS variables:

• Dark theme by default
• Green accent colors
• Comprehensive semantic color tokens
• Full contrast ratio compliance

Built with mobile-first responsive design:

• Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
• Flexible grid layouts
• Responsive typography
• Touch-friendly interactive elements

The project is configured for static export and can be deployed to:

• GitHub Pages
• Netlify
• Vercel
• AWS S3
• Any static hosting service

Build command:

npm run build

The built files will be in the out/ directory.

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

This project is open source and available under the MIT License.

• Next.js - The React framework
• shadcn/ui - Beautiful UI components
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icons
• Radix UI - Unstyled, accessible UI primitives