Command Palette
Search for a command to run...
Search for a command to run...
Add any component directly to your project using the CLI:
npx shadcn@latest add https://ui.heygaia.io/r/raised-button.jsonThat's it! The component is now in your project, ready to use.
GAIA UI works with any React project that has:
@/* pointing to your project root)Most modern setups already have these. If you're using Next.js, Vite with React, or any Tailwind-based starter, you're good to go.
Components use a cn() helper for class merging. If you don't have one yet, create lib/utils.ts:
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Install the dependencies:
npm install clsx tailwind-mergeSome components use Hugeicons. Install if needed:
npm install @hugeicons/react @hugeicons/core-free-iconsEvery component has a one-line install command. Find the component you want in our library, then run:
npx shadcn@latest add https://ui.heygaia.io/r/[component-name].jsonThe CLI automatically:
components/ui folderPrefer to copy-paste? Each component page has a "Code" tab. Copy the code and save it to your project.
Import from your components folder:
import { RaisedButton } from "@/components/ui/raised-button";
export default function Page() {
return <RaisedButton>Get Started</RaisedButton>;
}