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. It now includes button, toggle, switch, tabs, hover-card, dialog, a single-layer dropdown-menu, and select.

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">Password</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>
    Host-neutral interaction protocols for adaptable UI components.
  </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>

Select