Docs
Installation

Installation

How to install dependencies and structure your app.

New Project

Run the following command to create a new Next.js project using the next-template template:

npx create-next-app -e https://github.com/brudi/next-template
npx create-next-app -e https://github.com/brudi/next-template

create-next-app

If you have created a project using create-next-app, you can use the brudi CLI to initialize the project.

Create a new project

npx create-next-app my-app
npx create-next-app my-app

Run the CLI

npx brudi-ui init
npx brudi-ui init

This will install dependencies and configure the AX app for you.

Manual Installation

Add dependencies

Add the following dependencies to your project:

npm install @brudi/tailwind @brudi/react-utils
npm install @brudi/tailwind @brudi/react-utils

Path Aliases

I use the @ alias to make it easier to import components. This is how I configure it in tsconfig.json:

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

If you use a different alias such as ~, you'll need to update import statements when adding components.

Configure tailwind.config.js

Here's what my tailwind.config.js file looks like:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  preset: ["@brudi/tailwind/preset-app"],
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  preset: ["@brudi/tailwind/preset-app"],
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
}

Configure styles

Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the theming section.

styles/globals.css
/* Tailwind Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* Global Styles */
@import '@brudi/ax-global-styles/style-site.css';
 
/*
 * AX Design System Tokens.
 */
@import '@brudi/design-system-tokens/dist/sites/css/tokens.css';
@import '@brudi/design-system-tokens/dist/sites/css/helpers/elevation.css';
@import '@brudi/design-system-tokens/dist/sites/css/helpers/typography.css';
@import '@brudi/design-system-tokens/dist/global/css/helpers/tailwind-colors.css';
 
html,
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
  }
 
  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}
styles/globals.css
/* Tailwind Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* Global Styles */
@import '@brudi/ax-global-styles/style-site.css';
 
/*
 * AX Design System Tokens.
 */
@import '@brudi/design-system-tokens/dist/sites/css/tokens.css';
@import '@brudi/design-system-tokens/dist/sites/css/helpers/elevation.css';
@import '@brudi/design-system-tokens/dist/sites/css/helpers/typography.css';
@import '@brudi/design-system-tokens/dist/global/css/helpers/tailwind-colors.css';
 
html,
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
  }
 
  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

App structure

Here's an example of how you could structure your app.

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── button.tsx
│   │   ├── select.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json
.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── button.tsx
│   │   ├── select.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json
IntroductionTheming