Introduction

Welcome to the documentation for AHs UI Lab. This guide will help you get started and use the components effectively.

shadcn UI

npx shadcn@latest init

Next.js

This project uses Next.js for building modern React applications.

Tailwind CSS

All styling is done with Tailwind CSS.

To install Tailwind CSS, run:

npm install tailwindcss @tailwindcss/postcss postcss

Then configure PostCSS plugins in postcss.config.mjs:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

Import Tailwind CSS in your global stylesheet globals.css:

@import "tailwindcss";

Now you can use Tailwind classes in your components, for example:

export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

Motion

Motion is used for animations in UI components. Refer to the component documentation for usage examples.

npm i motion