YayCommerce Blocks for Shadcn UI

Description

YayCommerce Blocks for Shadcn UI is a companion plugin for the Shadcn theme. It adds interactive Gutenberg blocks built on Shadcn UI design principles and a library of ready-made section patterns.

Note: This plugin requires the WordPress Shadcn theme, or a child of it, to be active.

shadcn/ui is an open-source project by shadcn. This plugin is not affiliated with or endorsed by shadcn/ui; it is built by YayCommerce for the Shadcn WordPress theme.

Content and layout blocks

• Card – A card container, with Card Header, Card Content and Card Footer child blocks.
• Accordion – Vertically stacked collapsible sections, one open at a time or several at once. Collapsible (all closed), selectable trigger heading level (H2-H6), outlined variant, optional auto-rotation with per-item progress, and a per-item disabled state.
• Tabs – Layered sections of content that show one panel at a time, built from Tab child blocks.
• Badge – A small inline label or status pill with variants, an optional link and an optional icon.
• Avatar and Avatar Group – A circular avatar with fallback initials, and an overlapping stack with an automatic “+N” overflow indicator.
• Bubble and Bubble Group – Conversational message bubbles for chat mockups: 7 variants, with start/end alignment inherited from the group.
• Marker – A small labeled meta-row: a muted text line, a centered separator, or a bordered label.
• Empty – An empty state placeholder with centered content.

Overlay and notification blocks

• Alert – A callout for user attention, with Alert Title and Alert Description child blocks and an optional dismiss button.
• Sonner (Toast) – A button that fires a toast on click: default, success, error, warning and info types with rich colors and icons, stacking on a single shared toaster.
• Drawer – A slide-out panel, with Drawer Trigger, Header, Content and Footer child blocks.
• Sheet – A modal side panel, with Sheet Trigger, Header, Content and Footer child blocks.
• Tooltip – A hover hint, with Tooltip Trigger and Tooltip Content child blocks.

Motion and data blocks

• Carousel – A slider that wraps any content, including posts and products. Horizontal or vertical, with a configurable number of slides per view.
• Marquee – A continuously scrolling, seamless strip for logos, testimonials or any content, built from Marquee Item children.
• Progress – A progress bar for loading and completion indicators.
• Counter – A number that counts up to its target value when it scrolls into view.
• Countdown – A timer counting down to a date and time, for promo banners and launch pages.

Pricing blocks

• Pricing – Holds the billing interval for everything inside it. Plans are laid out with ordinary blocks.
• Pricing Switch – Chooses the billing interval for every price in the surrounding Pricing block.
• Pricing Price – A price figure that follows the current billing interval.

Form blocks

• Form – Emails its fields to the site admin, or a chosen recipient, on submit.
• Input – A labeled text, email or phone field.
• Textarea – A labeled multi-line message field.
• Select – A labeled dropdown of predefined options.
• Form Submit Button – A real submit button, with a pending spinner while sending.

Submissions travel over a public REST endpoint guarded by a honeypot and per-IP rate limiting, and nothing is stored in the database. Delivery uses wp_mail(), so a mail or SMTP plugin is recommended for reliable sending. Developers can veto a submission, to add a captcha for example, with the shadcn_form_validate filter.

Filtering

• Filterable Sections – Labelled Filter Section children with a dropdown that narrows the page down to one of them.

Live Purchase (WooCommerce only)

• Live Purchase – A toast pinned to the corner of the page that rotates through recent purchases and auto-dismisses. Only available while WooCommerce is active.

It runs from one of two sources. Real orders publishes genuine recent purchases: a shortened buyer name such as “Sarah M.”, the product, how long ago, and optionally the city. Read that sentence again before switching it on — it means customer first names, and city if you enable it, become visible to every anonymous visitor. Full names, addresses, order totals, order IDs and email addresses are never included, orders below a threshold you set keep the toast silent, and the feed is served over a rate-limited endpoint whose fields are signed so they cannot be widened from the outside.

Simulated invents the purchases instead, drawing products from your own best sellers. No buyer is invented: every notification reads “Someone just purchased …”, with no name and no location. Presenting invented purchases as genuine is restricted under EU consumer law and by the FTC, so treat this as a demo and staging feature and think hard before running it on a live shop.

Patterns

473 section patterns ship with the plugin, filed under their own categories in the inserter: about, awards, banner, call to action, careers, case studies, changelog, community, compare, compliance, contact, download, FAQ, footer, hero, incentives, industries, portfolio, posts, pricing, process, services, stats, team, testimonials, text and timeline.

Patterns are registered lazily, so they cost nothing until the inserter actually reads one, and every placeholder image ships with the plugin, so a pattern makes no outbound requests to render.

Editor extensions

• Icon picker – A searchable Lucide icon picker (curated set) on the Badge block and on the core Button block, with left/right position and size controls. Icons render as inline SVG and inherit the current text color.
• Block styles – Sticky column, Divided rows, On dark and Hover reveal panel for core Group; Check list and Plain list for core List; Vertical rail for Carousel.

Integrations

• WooCommerce – A free shipping progress indicator powered by the Progress block.

Features

• Built with the WordPress Interactivity API for smooth, JavaScript-powered interactions
• Fully responsive and mobile-friendly
• Inherits Shadcn theme styling and design tokens
• Supports the editor’s color, spacing, typography and border controls
• Block editor integration with live preview
• Custom block category for easy discovery
• Translation-ready (text domain: yaycommerce-blocks-for-shadcn-ui)
• Lightweight and performance optimized

Source Code

The full, unminified source of this plugin, including the JavaScript and CSS under src/ and the build tooling, is maintained publicly at github.com/YayCommerce/WPShadcn-Blocks.

To build the plugin from source:

1. Clone the repository.
2. Run npm ci to install the dependencies.
3. Run npm run build to compile src/ into build/.

Support

For support, questions, or to report bugs, please visit wpshadcn.com or contact the plugin author.

Credits

• Built with Shadcn UI design principles. Not affiliated with or endorsed by shadcn/ui.
• Uses WordPress Interactivity API
• Icons from Lucide, licensed under the ISC License (see LICENSE-lucide.txt)
• Carousel powered by Embla Carousel, licensed under the MIT License
• Developed by YayCommerce

License

This plugin is licensed under the GNU General Public License v3 or later.