Skip to content

Docs Prototypes Whitepaper

Shadcn Library

Shadcn-style prototype library built on Proto UI Base

This page is a focused showcase for shadcn-style prototypes. For now, it includes button, toggle, switch, tabs, hover-card, dialog, and a single-layer dropdown-menu.

Button

Toggle

Switch

Tabs

<wc-shadcn-tabs-root default-value="account">
  <wc-shadcn-tabs-list>
    <wc-shadcn-tabs-trigger value="account">Account</wc-shadcn-tabs-trigger>
    <wc-shadcn-tabs-trigger value="password">
      <wc-shadcn-button>Password</wc-shadcn-button>
    </wc-shadcn-tabs-trigger>
    <wc-shadcn-tabs-trigger value="billing" disabled>Billing</wc-shadcn-tabs-trigger>
  </wc-shadcn-tabs-list>
  <wc-shadcn-tabs-content value="account">Make changes to your account here.</wc-shadcn-tabs-content>
  <wc-shadcn-tabs-content value="password">Change your password here.</wc-shadcn-tabs-content>
  <wc-shadcn-tabs-content value="billing">Billing tab is disabled in this preview.</wc-shadcn-tabs-content>
</wc-shadcn-tabs-root>

<wc-shadcn-hover-card-root class="relative inline-flex items-start">
  <wc-shadcn-hover-card-trigger>@proto-ui</wc-shadcn-hover-card-trigger>
  <wc-shadcn-hover-card-content class="mt-3">
    Build headless protocols once, then skin them per host.
  </wc-shadcn-hover-card-content>
</wc-shadcn-hover-card-root>

Dialog

<wc-shadcn-dialog-root class="relative inline-flex items-start">
  <wc-shadcn-dialog-trigger>Open Dialog</wc-shadcn-dialog-trigger>
  <wc-shadcn-dialog-mask></wc-shadcn-dialog-mask>
  <wc-shadcn-dialog-content>
    <wc-shadcn-dialog-title>Edit Profile</wc-shadcn-dialog-title>
    <wc-shadcn-dialog-description>
      Make changes to your profile here. Click save when you're done.
    </wc-shadcn-dialog-description>
    <div class="flex gap-2 justify-end">
      <wc-shadcn-dialog-close variant="outline">Cancel</wc-shadcn-dialog-close>
      <wc-shadcn-dialog-close>Save changes</wc-shadcn-dialog-close>
    </div>
  </wc-shadcn-dialog-content>
</wc-shadcn-dialog-root>