Next.js
Install and configure Nyxb UI for Next.js
Information
This project and all components are written in TypeScript. We recommend using TypeScript for your project as well.
Create project
Start by creating a new Next.js project using create-next-app
:
npx create-next-app@latest my-app --typescript --tailwind --eslint
Run the CLI
Run the nyxbui
init command to setup your project:
npx nyxbui@latest init
Configure nyxbui.json
You will be asked a few questions to configure nyxbui.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
Fonts
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 { ny } 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={ny(
"min-h-screen bg-background font-sans antialiased",
fontSans.variable
)}
>
...
</body>
</html>
)
}
2. Configure theme.extend.fontFamily
in tailwind.config.ts
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],
},
},
},
}
App structure
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.mjs
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
└── tsconfig.json
- I place the UI components in the
components/ui
folder. - The rest of the components such as
<PageHeader />
and<MainNav />
are placed in thecomponents
folder. - The
lib
folder contains all the utility functions. I have autils.ts
where I define theny
helper. - The
styles
folder contains the global CSS.
That's it
You can now start adding components to your project.
npx nyxbui@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>
)
}