Vite | UI | SmartAC.com

Create a Vite react project

To create a new Vite project with React, run the following command:

npm create vite@latest -- --template react-ts my-vite-app

Then navigate to the project directory:

cd ./my-vite-app

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@^3 @tailwindcss/typography tailwindcss-animate postcss autoprefixer

Configure TailwindCSS

Init the TailwindCSS configuration file:

npx tailwindcss init -p

and change the extension of the tailwind.config.js file to tailwind.config.ts, then open the file and add the content below:

import type { Config } from 'tailwindcss';

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

export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './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 Vite project using the react-ts template, you can import the CSS globals in the main.tsx file inside the src directory:

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

A complete example of the main.tsx file:

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

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App.tsx';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Adding the official Google Fonts

Inside the index.html file, add the following code to import the official Google Fonts:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
      rel="stylesheet"
    />

    <style>
      :root {
        --font-sans: 'Manrope';
        --font-mono: 'Roboto Mono';
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Notice that we are adding the --font-sans and --font-mono CSS variables using a <style> tag and attaching them to :root.

Adding providers

Typically, you will want to add providers to your React application. To do this, the recommended approach is to add them inside the main.tsx file:

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

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

import App from './App.tsx';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
      <Toaster />
    </ThemeProvider>
  </StrictMode>,
);

Using the UI components

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

import { useState } from 'react';

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

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <Button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </Button>
    </div>
  );
}

export default App;