Command Palette
Search for a command to run...
Search for a command to run...
If you don't have a Next.js project yet, create one:
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-appGAIA UI uses the following dependencies:
npm install class-variance-authority clsx tailwind-merge @hugeicons/react @hugeicons/core-free-icons
npm install -D @types/nodeAdd the following to your tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}Update your tailwind.config.ts:
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};
export default config;Create a lib/utils.ts file:
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Now you can start installing components. For example, to install the Raised Button:
npx shadcn@latest add https://ui.gaia.com/r/raised-button.jsonOr copy the component code directly from the documentation.
Import and use components in your app:
import { RaisedButton } from "@/components/ui/raised-button";
export default function App() {
return <RaisedButton>Click me</RaisedButton>;
}