This is a Next.js project bootstrapped with create-next-app and configured with TailwindCSS v4 and ShadCN UI.
First, run the development server:
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses Bun as the package manager:
- Install dependencies:
bun add <package-name> - Run scripts:
bun <script-name> - Manage dev dependencies:
bun add -d <package-name>
The project uses Tailwind CSS V4 with a theme defined in:
app/globals.css- For CSS variables including colors in OKLCH format and custom theming- Tailwind V4 uses the new
@themedirective for configuration
This project uses ShadCN UI for styled components. The components are incorporated directly into the codebase (not as dependencies), making them fully customizable. All components have been installed:
- accordion
- alert-dialog
- alert
- aspect-ratio
- avatar
- badge
- breadcrumb
- button
- calendar
- card
- carousel
- chart
- checkbox
- collapsible
- command
- context-menu
- dialog
- drawer
- dropdown-menu
- form
- hover-card
- input-otp
- input
- label
- menubar
- navigation-menu
- pagination
- popover
- progress
- radio-group
- scroll-area
- select
- separator
- sheet
- skeleton
- slider
- sonner
- switch
- table
- tabs
- textarea
- toast
- toggle-group
- toggle
Lucide React is the preferred icon library for this project, as specified in components.json. Always use Lucide icons to maintain consistency:
import { ArrowRight } from "lucide-react";
// Use in components
<Button>
<span>Click me</span>
<ArrowRight />
</Button>;This project uses Next.js Font Optimization with:
- Inter (sans-serif)
- Playfair Display (serif)
To change or update fonts:
- Modify
app/layout.tsxto import and configure the desired fonts:
import { NewFont } from "next/font/google";
const newFont = NewFont({
variable: "--font-new-font",
subsets: ["latin"],
weight: ["400", "500", "700"],
});
<body className={`${newFont.variable} antialiased`}>- Update the font family in
app/globals.css:
--font-sans: var(--font-new-font);The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.