🚀 Shadcn/ui landing

A modern, fast, and user-friendly landing page built with cutting-edge frontend technologies. Perfect for developers who want to kickstart their projects with a solid foundation.

🌐 Live Demo

Check out the live demo: View Demo

✨ Features

• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile
• 🎨 Modern UI/UX - Clean and intuitive interface with smooth animations
• ⚡ Lightning Fast - Optimized for speed with Next.js
• 🎯 Type-Safe - Built with TypeScript for better development experience
• 🎨 shadcn/ui Starter Set - Includes reusable primitives (button, badge, dropdown-menu, navigation-menu)

🌗 Theme Provider + Semantic Tokens

This project uses the standard shadcn theme setup with next-themes:

• ThemeProvider wrapper in src/app/layout.tsx with:
  • attribute="class"
  • defaultTheme="system"
  • enableSystem
  • disableTransitionOnChange
• darkMode: ["class"] enabled in tailwind.config.ts
• CSS variables defined in src/app/globals.css for light (:root) and dark (.dark) themes.

Semantic tokens available for Tailwind utilities include:

• background, foreground
• card, card-foreground
• popover, popover-foreground
• primary, primary-foreground
• secondary, secondary-foreground
• muted, muted-foreground
• accent, accent-foreground
• destructive, destructive-foreground
• border, input, ring
• chart-1 to chart-5

Example usage:

<section className="bg-background text-foreground border-border">
  <h2 className="text-primary">Semantic theme token example</h2>
  <p className="text-muted-foreground">
    Automatically adapts to light/dark mode.
  </p>
</section>

🛠️ Installation

1. Clone the repository:

git clone https://github.com/anibalalpizar/nextjs-shadcn-landing.git

2. Install dependencies:

cd nextjs-shadcn-landing
npm install

🚀 Usage

Start the development server:

npm run dev

Build for production:

npm run build

💻 Code Examples

Component Usage

import { Button } from "@/components/ui/button"

function HeroSection() {
  return (
    <section className="space-y-6 rounded-2xl border bg-card p-6 shadow-sm">
      <p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
        Launch faster
      </p>
      <h1 className="text-3xl font-bold tracking-tight text-foreground">
        Welcome to our landing page
      </h1>
      <p className="max-w-xl text-muted-foreground">
        Start building something amazing.
      </p>
      <Button>Get Started</Button>
    </section>
  )
}

🛠️ Tech Stack

Our landing page is built with modern frontend technologies:

• - React framework for production
• - Type-safe JavaScript
• - Utility-first CSS framework
• - Re-usable components

📊 Project Structure

.
├── src/
│   ├── app/
│   │   ├── fonts/             # Font configurations
│   │   ├── layout.tsx         # Root layout
│   │   └── page.tsx           # Landing page composition
│   ├── components/
│   │   ├── sections/         # Landing sections + section subcomponents
│   │   ├── ui/               # shadcn/ui components
│   │   │   ├── badge.tsx
│   │   │   ├── button.tsx
│   │   │   ├── dropdown-menu.tsx
│   │   │   └── navigation-menu.tsx
│   │   └── theme-provider.tsx
│   ├── lib/                  # Utility functions
│   └── types/                # TypeScript type definitions

🤝 Contributing

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.

---

⭐️ If you found this project helpful, please give it a star!