Getting Started

Learn how to leverage the @imagine-ui/react components to swiftly craft elegant and versatile pages with the assistance of Tailwind CSS.

@imagine-ui/react collaborates seamlessly with Tailwind CSS classes, requiring prior installation of Tailwind CSS in your project. For installation instructions, please refer to the Tailwind CSS Installation Guide.

1. Install @imagine-ui/react.

npm i @imagine-ui/react

2. Following the installation of @imagine-ui/react, configure Tailwind CSS in your project:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@imagine-ui/react/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {},
  plugins: [],
};

3. @imagine-ui/react is equipped with a theme provider that sets the default theme/styles for components, or allows the provision of custom theme/styles to components. Encase your entire application with the ThemeProvider from @imagine-ui/react.

import { ThemeProvider } from "@imagine-ui/react";
 
export default function MyApp() {
  const theme = "light";

  return (
    <ThemeProvider theme={{ initialTheme: theme }}>
      <App />
    </ThemeProvider>
  );
}

4. You've done it! You're now prepared to utilize @material-tailwind/react.

import { Button } from "@imagine-ui/react";

export default function Example() {
  return <Button>Button</Button>;
}