跳转到内容

Docs Prototypes Whitepaper

Shadcn 原型库

基于 Proto UI Base 原型实现的 Shadcn 风格原型库

当前页面用于集中展示 shadcn 系列原型。现阶段先提供 button、toggle、switch、tabs、hover-card、dialog，以及一个不带 submenu 的单层 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>