Getting Started

Quick Start

Build a sign-in card in two minutes, composing Wuko's primitives the way they're meant to be composed.

A signed-in card, end to end

Once you've installed each primitive via shadcn add (see Installation), this is the shape of the composition: a Card wrapping an Avatar with identity, an Input for the editable field, and a primary Button to commit the change.

components/profile-card.tsx

import { Avatar } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

export function ProfileCard() {
  return (
    <Card className="max-w-sm">
      <div className="flex items-center gap-3">
        <Avatar fallback="V" status="online" />
        <div>
          <div className="font-semibold">Wuko Kitsune</div>
          <div className="text-sm opacity-60">wuko@wuko.dev</div>
        </div>
      </div>
      <Input
        label="Display name"
        defaultValue="Wuko Kitsune"
        className="mt-4"
      />
      <Button variant="primary" className="mt-4">
        Save changes
      </Button>
    </Card>
  );
}

Illustrative for now

This sample previews the composition pattern. Card, Input, Button, and Avatar ship from Phase 5 onward. Install them via shadcn add as they land, and this exact code will run.

← Previous

Installation

Button