Next.js

Next.js installation guide.

Create a Next.js project

To create a new Next.js project, run the following command:

npx create-next-app@latest my-next-app

It will prompt you to choose some options for your project. We recommend choosing the following options:

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? …  Yes
✔ Would you like to use App Router? (recommended) …  Yes
✔ Would you like to use Turbopack for `next dev`? …  Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No

Install the UI package

Follow the instructions described in the General Installation guide to install the UI package.

NPM_TOKEN='<token>' npm install @smartacteam/ui

Install UI package peer dependencies

The UI package has peer dependencies that must be installed in your project. To install the peer dependencies, run the following command:

# If you are using the chart components
npm install recharts
npm install -D @tailwindcss/typography tailwindcss-animate

Configure TailwindCSS

To configure TailwindCSS, modify the tailwind.config.ts file in the root of your project and make sure it looks like this:

import type { Config } from 'tailwindcss';

import smacPreset from '@smartacteam/ui/tailwind.config.ts';

export default {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@smartacteam/ui/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  presets: [smacPreset],
} satisfies Config;

Notice that we are pointing to the @smartacteam/ui package in the content array. If you have a different folder structure, you may need to adjust the paths.

Import the CSS globals

If you created the Next.js project using the recommended options, you can import the CSS globals in the root layout.tsx file inside the app directory:

import '@smartacteam/ui/global.css';

A complete example of the layout.tsx file:

import '@smartacteam/ui/global.css';

import type { Metadata } from 'next';
import { Manrope, Roboto_Mono } from 'next/font/google';

const manropeSans = Manrope({
  variable: '--font-sans',
  subsets: ['latin'],
});

const robotoMono = Roboto_Mono({
  variable: '--font-mono',
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${manropeSans.variable} ${robotoMono.variable}`}>
        {children}
      </body>
    </html>
  );
}

We are importing the official SmartAC.com Google Fonts in the layout.tsx file and setting the font-sans and font-mono CSS variables expected by the UI package.

Adding a client-side root provider

Typically, you will want to add a root provider to your Next.js application to use context or other providers. To do this, create a provider.tsx file in the app directory and add the following code:

'use client';

import { ThemeProvider } from '@smartacteam/ui/theme-next';
import { Toaster } from '@smartacteam/ui/toast';

export function RootProvider({ children }: React.PropsWithChildren) {
  return (
    <ThemeProvider>
      {children}
      <Toaster />
    </ThemeProvider>
  );
}

And then use the RootProvider in the layout.tsx file:

import '@smartacteam/ui/global.css';

import type { Metadata } from 'next';
import { Manrope, Roboto_Mono } from 'next/font/google';

import { RootProvider } from './provider';

const manropeSans = Manrope({
  variable: '--font-sans',
  subsets: ['latin'],
});

const robotoMono = Roboto_Mono({
  variable: '--font-mono',
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${manropeSans.variable} ${robotoMono.variable}`}>
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

Using the UI components

You can now use the UI components in your Next.js application. For example, to use the Button component inside a page.tsx file:

import { Button } from '@smartacteam/ui/button';

export default function HomePage() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}