Introduction - Aspect UI

Aspect UI is an open-source component library built on top of React and Tailwind CSS. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications. Install Aspect UI in your React application or NextJs Application following step bellow.

Vite React Application#

Setting Up Aspect UI in Vite React Application

Step 1

Create a Vite React Application

Replace my-project with your preferred project name.

npm create vite@latest my-project -- --template react
cd my-project

Step 2

Install Tailwind CSS

npm i autoprefixer postcss tailwindcss
npx tailwindcss init -p

Step 3

Install Aspect UI library

npm i aspect-ui

Step 4

Configure Tailwind CSS

Open the tailwind.config.js file in your project. Wrap your config with the AspectUITheme function to achieve aspect-ui configuration.

import { AspectUITheme } from "aspect-ui/AspectUITheme";

const config = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {},
}

export default AspectUITheme(config);

Step 5

Add Tailwind CSS to index.css

@import "aspect-ui/css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Congratulations! You've now successfully set up Aspect UI in your Vite React application. You can begin using components from aspect-ui in your project.

import { Button } from "aspect-ui";
  
const App = () => {
  return (
    <Button>Aspect UI</Button>
  )
}

export default App;

Next JS Application#

You can easily integrate aspect-ui library into your Next.js application.

Step 1

Create a NextJS application

Ensure that you select tailwindcss as a dependency for your application during the setup.

npx create-next-app@latest

Step 2

Install Aspect UI library

npm i aspect-ui

Step 3

Configure Tailwind CSS

Open the tailwind.config.js file in your project. Wrap your config with the AspectUITheme function to achieve aspect-ui configuration.

import { AspectUITheme } from "aspect-ui/AspectUITheme";

const config = {
  content: [
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {},
};

export default AspectUITheme(config);

Step 4

Add Tailwind CSS to app/globals.css File

@import "aspect-ui/css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Now you can import any component from aspect-ui and start using it in your NextJS project.

import { Button } from "aspect-ui";

const page = () => {
  return (
    <Button>Aspect UI</Button>
  )
}
    
export default page;
Edit this pageTypography