Install with shadcn

Already use the shadcn CLI? Add PlopUI with one command. It installs the real npm packages, sets up the styles once, and drops an editable example or a whole ready-made screen into your project.

One command

npx shadcn@latest add https://plopui.com/r/button.json

That command:

1. installs @plop-ui/react and @plop-ui/fonts from npm;
2. adds components/plop/plop-provider.tsx (only the first time), which loads PlopUI's styles and fonts;
3. adds an example you can edit, here components/plop/button-example.tsx.

The components themselves stay in node_modules, so npm update keeps bringing you fixes. Only the examples and blocks are copied into your project, and they're yours to change.

Wrap your layout once

After the first install, put PlopProvider around your app. In Next.js, that's app/layout.tsx:

import { PlopProvider } from "@/components/plop/plop-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="plop-surface" style={{ minHeight: "100vh" }}>
        <PlopProvider>{children}</PlopProvider>
      </body>
    </html>
  );
}

plop-surface paints the paper and sets PlopUI's body font; minHeight keeps the paper going to the bottom of short pages. PlopProvider already shows toasts, so there's no <Toaster /> to add. Pick another paper with <PlopProvider surface="notebook"> (see surfaces).

Blocks: whole screens

Ready-made screens built only from PlopUI components. Each is a single file you can rename, restyle and wire to your own data.

npx shadcn@latest add https://plopui.com/r/settings-panel.json
npx shadcn@latest add https://plopui.com/r/signup-card.json
npx shadcn@latest add https://plopui.com/r/empty-state.json

• Settings panel Profile fields, notification switches, a paper picker, and a Save button that toasts with a buddy.

  SettingsSettings

  Profile

  Name

  Email

  Notifications

  Email me when someone repliesWeekly digest

  Paper

  Poster

  Pass it to your <PlopProvider surface>.

  Save changesSave changesCancelCancel
  npx shadcn@latest add https://plopui.com/r/settings-panel.json
• Sign-up card Name, email and password with friendly errors, a terms checkbox, and a celebration when it works.

  Join the sketchbookJoin the sketchbook

  Free forever. Bring your own doodles.

  Name

  Email

  Password

  At least 8 characters.

  I agree to the terms

  Create accountCreate account
  npx shadcn@latest add https://plopui.com/r/signup-card.json
• Empty state A buddy, a short message and one clear next step, for lists with nothing in them yet.

  Nothing here yetNothing here yet

  Your sketchbook is empty. Start with one quick doodle; it doesn't have to be good.

  Post your first sketchPost your first sketch
  npx shadcn@latest add https://plopui.com/r/empty-state.json

Every component

Each component page has a matching registry item that installs PlopUI and adds that page's example.

• Buttonnpx shadcn@latest add https://plopui.com/r/button.json
• IconButtonnpx shadcn@latest add https://plopui.com/r/icon-button.json
• Tooltipnpx shadcn@latest add https://plopui.com/r/tooltip.json
• Switchnpx shadcn@latest add https://plopui.com/r/switch.json
• Checkboxnpx shadcn@latest add https://plopui.com/r/checkbox.json
• RadioGroupnpx shadcn@latest add https://plopui.com/r/radio.json
• Select & MultiSelectnpx shadcn@latest add https://plopui.com/r/select.json
• TextFieldnpx shadcn@latest add https://plopui.com/r/text-field.json
• Tagnpx shadcn@latest add https://plopui.com/r/tag.json
• Avatarnpx shadcn@latest add https://plopui.com/r/avatar.json
• Cardsnpx shadcn@latest add https://plopui.com/r/cards.json
• Tabsnpx shadcn@latest add https://plopui.com/r/tabs.json
• Count & StatusDotnpx shadcn@latest add https://plopui.com/r/badges.json
• StatusTimelinenpx shadcn@latest add https://plopui.com/r/status-timeline.json
• Loading statesnpx shadcn@latest add https://plopui.com/r/loading.json
• Calloutnpx shadcn@latest add https://plopui.com/r/callout.json
• Toastnpx shadcn@latest add https://plopui.com/r/toast.json
• SearchField & CommandPalettenpx shadcn@latest add https://plopui.com/r/search.json
• Menunpx shadcn@latest add https://plopui.com/r/menu.json
• WordSticker & Doodlenpx shadcn@latest add https://plopui.com/r/word-sticker.json
• Buddynpx shadcn@latest add https://plopui.com/r/buddy.json
• PlopProvidernpx shadcn@latest add https://plopui.com/r/provider.json
• Sheet & Headingnpx shadcn@latest add https://plopui.com/r/sheet-heading.json

Good to know

• Tailwind is optional. The blocks and examples don't use it, and PlopUI's styles aren't affected by Tailwind's reset, so it's fine either way.
• Leave room above buddy buttons. The character peeks about 30px above the button.
• Not using shadcn? Install the packages directly: see Installation.
• The whole registry is listed at /r/registry.json, in the format shadcn's CLI reads.