Basecoat UI MCP

<!-- Basecoat Empty State Component --> <div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12"> <header class="flex max-w-sm flex-col items-center gap-2 text-center"> <div class="mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9.5 7.5-2 2a4.95 4.95 0 1 0 7 7l2-2a4.95 4.95 0 1 0-7-7Z"></path> <path d="M14 6.5v10"></path> <path d="M10 7.5v10"></path> <path d="m16 7 1-5 1.37.68A3 3 0 0 0 19.7 3H21v1.3c0 .46.1.92.32 1.33L22 7l-5 1"></path> <path d="m8 17-1 5-1.37-.68A3 3 0 0 0 4.3 21H3v-1.3a3 3 0 0 0-.32-1.33L2 17l5-1"></path> </svg> </div> <h3 class="text-lg font-medium tracking-tight">No Projects Yet</h3> <p class="text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4"> You haven't created any projects yet. Get started by creating your first project. </p> </header> <section class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance"> <div class="flex gap-2"> <button class="btn">Create Project</button> <button class="btn-outline">Import Project</button> </div> </section> <a href="#" class="inline-flex items-center justify-center text-sm font-medium underline-offset-4 hover:underline text-muted-foreground gap-1.5"> Learn More <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M7 7h10v10"></path> <path d="M7 17 17 7"></path> </svg> </a> </div> <!-- Empty State with Border --> <div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed border p-6 text-center text-balance md:p-12 mt-8"> <header class="flex max-w-sm flex-col items-center gap-3 text-center"> <div class="mb-2 bg-muted text-foreground flex size-12 shrink-0 items-center justify-center rounded-lg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path> </svg> </div> <h3 class="text-lg font-semibold tracking-tight">Cloud Storage Empty</h3> <p class="text-muted-foreground text-sm/relaxed"> Upload files to your cloud storage to access them anywhere. </p> </header> <section class="flex w-full max-w-sm min-w-0 flex-col items-center gap-3"> <button class="btn-sm-outline">Upload Files</button> </section> </div>