---
title: "Deploy NextJS + ShadCN"
description: "NextJS + ShadCN with all components preinstalled"
category: "Other"
url: https://railway.com/deploy/nextjs-shadcn
---

# Deploy NextJS + ShadCN

NextJS + ShadCN with all components preinstalled

**[Deploy NextJS + ShadCN on Railway](https://railway.com/template/nextjs-shadcn)**

- **Creator:** SuperSlowSloth
- **Category:** Other
- **Total deploys:** 10

## Template content

### nextjs

- **Source:** https://github.com/bon5co/nextjs-shadcn-template
- **Public domain:** Yes

## Documentation

# Next.js + shadcn/ui Template

A modern Next.js template with all shadcn/ui components pre-installed and ready to deploy on Railway.

## Features

- **Next.js 16+** - The React framework for production
- **shadcn/ui** - All 50+ components pre-installed (Accordion, Alert, Avatar, Badge, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Context Menu, Data Table, Date Picker, Dialog, Drawer, Dropdown Menu, Form, Hover Card, Input, Input OTP, Label, Menubar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Sonner, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip, and more)
- **TypeScript** - Type safety out of the box
- **Tailwind CSS** - Utility-first CSS framework pre-configured
- **Dark Mode** - Built-in dark mode support with next-themes
- **Radix UI** - Accessible component primitives
- **Lucide Icons** - Beautiful icon library included

## What's Included

- All shadcn/ui components pre-installed and ready to use
- Tailwind CSS configuration with shadcn theme
- TypeScript setup with strict mode
- ESLint and Prettier configuration
- Dark mode toggle component
- Responsive design patterns
- Form validation with react-hook-form and Zod
- Toast notifications with Sonner
- Chart components with Recharts

# Deploy and Host

## About Hosting

This Next.js + shadcn/ui template is designed to be deployed on Railway with zero configuration. Railway automatically detects your Next.js application, installs dependencies, builds the project, and deploys it with a public URL.

Railway provides:
- **Automatic deployments** from your Git repository
- **Custom domains** and SSL certificates
- **Environment variable management**
- **Instant rollbacks** to previous deployments
- **Built-in metrics** and logging
- **Horizontal scaling** capabilities

## Why Deploy

Deploy this template to Railway when you need:
- A production-ready starting point for your Next.js application with beautiful UI components
- Rapid prototyping with pre-built, accessible components
- A professional-looking dashboard, landing page, or web application
- Type-safe forms with validation out of the box
- Dark mode support without additional configuration
- A scalable hosting solution that grows with your application

## Common Use Cases

- **SaaS Dashboards** - Build admin panels and data-heavy interfaces with pre-built table, chart, and form components
- **Landing Pages** - Create beautiful marketing sites with cards, hero sections, and navigation menus
- **Internal Tools** - Rapidly develop internal applications with consistent UI patterns
- **Product Prototypes** - Validate ideas quickly with production-ready components
- **Client Projects** - Start client work with a professional foundation
- **E-commerce Frontends** - Build shopping experiences with dialog, sheet, and carousel components
- **Documentation Sites** - Create docs with accordion, tabs, and navigation components

## Dependencies for

### Deployment Dependencies

This template includes the following core dependencies:
- `next` - React framework for production
- `react` & `react-dom` - React library
- `typescript` - Type safety
- `tailwindcss` - Utility-first CSS framework
- `@radix-ui/*` - Accessible component primitives (40+ packages)
- `class-variance-authority` - Component variant management
- `clsx` & `tailwind-merge` - Utility for merging Tailwind classes
- `lucide-react` - Icon library
- `next-themes` - Dark mode support
- `react-hook-form` - Form state management
- `zod` - Schema validation
- `sonner` - Toast notifications
- `recharts` - Chart library
- `date-fns` - Date utilities
- `vaul` - Drawer component
- `embla-carousel-react` - Carousel functionality
- `input-otp` - OTP input component

All dependencies are production-ready and actively maintained.

## Getting Started

### Local Development

```bash
npm install
npm run dev
```

Your app will be available at `http://localhost:3000`

### Deploy to Railway

1. Click the "Deploy on Railway" button
2. Railway will automatically detect your Next.js application
3. Your application will be built and deployed with a public URL
4. Configure custom domain (optional)

## Using shadcn/ui Components

All components are already included. Import and use them directly:

```tsx
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Dialog } from "@/components/ui/dialog"

export default function Page() {
  return (
    
      <button>Click me</button>
    
  )
}
```

## Environment Variables

No environment variables required for basic setup. Add your own as needed:

## Learn More

- [Next.js Documentation](https://nextjs.org/docs)
- [shadcn/ui Documentation](https://ui.shadcn.com)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [Railway Documentation](https://docs.railway.app)


## Similar templates

- [Rocky Linux](https://railway.com/deploy/rocky-linux) — Hosted Rocky Linux 9 workspace with SSH and persistent storage. 🚀
- [Foundry Virtual Tabletop](https://railway.com/deploy/X5tR6G) — A Self-Hosted & Modern Roleplaying Platform
- [Letta Code Remote](https://railway.com/deploy/letta-code-remote) — Run a Letta Code agent 24/7. No inbound ports, just deploy.

Open this page in a browser: https://railway.com/deploy/nextjs-shadcn