Basecoat UI MCP

<!-- Basecoat Item Component Patterns --> <!-- Note: There is no dedicated Item component - these are pure HTML/Tailwind patterns --> <div class="space-y-6"> <!-- Basic Item with Action --> <article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4"> <div class="flex flex-1 flex-col gap-1"> <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Basic Item</h3> <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance">A simple item with title and description.</p> </div> <button class="btn-sm-outline">Action</button> </article> <!-- Link Item with Chevron --> <a href="#" class="group/item flex items-center border text-sm rounded-md transition-colors hover:bg-accent/50 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border py-3 px-4 gap-2.5"> <div class="flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none bg-transparent [&_svg]:size-5"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path> <path d="m9 12 2 2 4-4"></path> </svg> </div> <div class="flex flex-1 flex-col gap-1"> <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Your profile has been verified.</h3> </div> <div class="flex items-center gap-2 [&_svg]:size-4"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </div> </a> </div> <!-- Item Variants --> <div class="space-y-4 mt-8"> <!-- Default Variant (transparent border) --> <article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent p-4 gap-4"> <div class="flex flex-1 flex-col gap-1"> <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Default Variant</h3> <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance">Standard styling with subtle background.</p> </div> <button class="btn-sm-outline">Open</button> </article> <!-- Outline Variant --> <article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4"> <div class="flex flex-1 flex-col gap-1"> <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Outline Variant</h3> <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance">Outlined style with clear borders.</p> </div> <button class="btn-sm-outline">Open</button> </article> <!-- Muted Variant --> <article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent bg-muted/50 p-4 gap-4"> <div class="flex flex-1 flex-col gap-1"> <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Muted Variant</h3> <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance">Subdued appearance for secondary content.</p> </div> <button class="btn-sm-outline">Open</button> </article> </div> <!-- Item with Icon --> <article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4 mt-8"> <div class="flex shrink-0 items-center justify-center gap-2 self-start [&_svg]:pointer-events-none size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path> <path d="M12 8v4"></path> <path d="M12 16h.01"></path> </svg> </div> <div class="flex flex-1 flex-col gap-1"> <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Security Alert</h3> <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance">New login detected from unknown device.</p> </div> <button class="btn-sm-outline">Review</button> </article> <!-- Item with Avatar --> <article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4 mt-8"> <img src="https://github.com/shadcn.png" alt="User avatar" class="size-10 rounded-full object-cover"> <div class="flex flex-1 flex-col gap-1"> <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">shadcn</h3> <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance">Last seen 5 months ago</p> </div> <button class="btn-icon-outline rounded-full"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4"> <path d="M5 12h14"></path> <path d="M12 5v14"></path> </svg> </button> </article> <!-- Item Group with Separators --> <div class="flex flex-col mt-8"> <article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent p-4 gap-4"> <img src="https://github.com/hunvreus.png" alt="Ronan Berder" class="size-10 rounded-full object-cover"> <div class="flex flex-1 flex-col gap-1"> <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">hunvreus</h3> <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance">hunvreus@gmail.com</p> </div> <button class="btn-icon-outline rounded-full"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4"> <path d="M5 12h14"></path> <path d="M12 5v14"></path> </svg> </button> </article> <hr role="separator" class="border-border"> <article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent p-4 gap-4"> <img src="https://github.com/shadcn.png" alt="shadcn" class="size-10 rounded-full object-cover"> <div class="flex flex-1 flex-col gap-1"> <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">shadcn</h3> <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance">shadcn@vercel.com</p> </div> <button class="btn-icon-outline rounded-full"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4"> <path d="M5 12h14"></path> <path d="M12 5v14"></path> </svg> </button> </article> </div>