āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/nolly-studio/cult-ui/installation/next ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Start by creating a new Next.js project using create-next-app:
npx create-next-app@latest my-app --typescript --tailwind --eslint
Run the cult-ui init command to setup your project:
npx cult-ui@latest init
You will be asked a few questions to configure components.json:
Which style would you like to use? āŗ Default
Which color would you like to use as base color? āŗ Slate
Do you want to use CSS variables for colors? āŗ no / yes
I use Inter as the default font. Inter is not required. You can replace it with any other font.
Here's how I configure Inter for Next.js:
1. Import the font in the root layout:
import "@/styles/globals.css"
import { Inter as FontSans } from "next/font/google"
import { cn } from "@/lib/utils"
const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
})
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en" suppressHydrationWarning>
<head />
<body
className={cn(
"min-h-screen bg-background font-sans antialiased",
fontSans.variable
)}
>
...
</body>
</html>
)
}
2. Configure theme.extend.fontFamily in tailwind.config.js
const { fontFamily } = require("tailwindcss/defaultTheme")
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
},
},
},
}
Here's how I structure my Next.js apps. You can use this as a reference:
.
āāā app
ā āāā layout.tsx
ā āāā page.tsx
āāā components
ā āāā ui
ā ā āāā alert-dialog.tsx
ā ā āāā button.tsx
ā ā āāā dropdown-menu.tsx
ā ā āāā ...
ā āāā main-nav.tsx
ā āāā page-header.tsx
ā āāā ...
āāā lib
ā āāā utils.ts
āāā styles
ā āāā globals.css
āāā next.config.js
āāā package.json
āāā postcss.config.js
āāā tailwind.config.js
āāā tsconfig.json
components/ui folder.<PageHeader /> and <MainNav /> are placed in the components folder.lib folder contains all the utility functions. I have a utils.ts where I define the cn helper.styles folder contains the global CSS.You can now start adding components to your project.
npx cult-ui@latest add button
The command above will add the Button component to your project. You can then import it like this:
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā