Quick Start

Render your first Kiwimi Lab component.

This guide walks you through adding and using a Button component in under five minutes.

Import the component

After copying the Button source to components/ui/button.tsx:

TSX

import { Button } from "@/components/ui/button";

TSX

export default function Page() {
  return (
    <Button>Get Started</Button>
  );
}

Kiwimi Lab buttons support multiple visual variants:

TSX

<Button variant="default">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

TSX

import { ArrowRight } from "lucide-react";

<Button>
  Continue
  <ArrowRight className="ml-2 h-4 w-4" />
</Button>

Explore the full Button API or learn about Theming.