Title: YayCommerce Blocks for Shadcn UI Author: YayCommerce Published: October 22, 2026 Last modified: October 22, 2026 --- Search plugins ![](https://s.w.org/plugins/geopattern-icon/yaycommerce-blocks-for-shadcn-ui.svg) # YayCommerce Blocks for Shadcn UI By [YayCommerce](https://profiles.wordpress.org/yaycommerce/) [Download](https://downloads.wordpress.org/plugin/yaycommerce-blocks-for-shadcn-ui.1.0.0.zip) * [Details](https://wordpress.org/plugins/yaycommerce-blocks-for-shadcn-ui/#description) * [Reviews](https://wordpress.org/plugins/yaycommerce-blocks-for-shadcn-ui/#reviews) * [Installation](https://wordpress.org/plugins/yaycommerce-blocks-for-shadcn-ui/#installation) * [Development](https://wordpress.org/plugins/yaycommerce-blocks-for-shadcn-ui/#developers) [Support](https://wordpress.org/support/plugin/yaycommerce-blocks-for-shadcn-ui/) ## Description YayCommerce Blocks for Shadcn UI is a companion plugin for the [Shadcn theme](https://wpshadcn.com/). 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](https://wordpress.org/themes/shadcn/), 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](https://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](https://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](https://lucide.dev), licensed under the ISC License (see ` LICENSE-lucide.txt`) * Carousel powered by [Embla Carousel](https://www.embla-carousel.com), licensed under the MIT License * Developed by YayCommerce ### License This plugin is licensed under the GNU General Public License v3 or later. ## Blocks This plugin provides 50 blocks. * Avatar Group A stack of overlapping avatars with an automatic "+N" overflow indicator. * Accordion A vertically stacked set of collapsible sections. One section opens at a time. * Form Submit Button A real submit button for the Form block, with a pending spinner while sending. * Live Purchase A floating toast that rotates through recent purchases. Feeds from real WooCommerce orders, or from simulated ones drawn from your best-selling products. Requires WooCommerce. * Bubble A conversational message bubble with variants and start/end alignment. * Bubble Group A vertical stack of message bubbles for chat and conversation mockups. * Filterable Sections Labelled sections with a dropdown that narrows the page down to one of them. * Sonner (Toast) A button that shows a toast notification on click, with type variants and rich colors. * Marker A small labeled meta-row: a muted text line, a centered separator, or a bordered label. * Progress A progress bar for loading indicators and progress bars. * Tooltip A tooltip for displaying additional information. * Form A form that emails its fields to the site admin or a chosen recipient on submit. * Sheet Sheet block to display additional content, actions, or navigation in a modal dialog. * Avatar A circular avatar image with fallback initials shown when no image is set or it fails to load. * Pricing Holds the billing interval for everything inside it. Lay the plans out with any blocks; add a Pricing Switch to change interval and Pricing Price wherever a figure should follow it. * Alert Alert block to displays a callout for user attention. * Counter A number that counts up to its target value when it scrolls into view. * Carousel A flexible carousel that wraps any content including posts and products. * Countdown A timer counting down to a date and time, for promo banners and launch pages. * Drawer Drawer block to display additional content, actions, or navigation without leaving the current page. * Empty An empty state placeholder with centered content. * Textarea A labeled multi-line text field for form messages. * Pricing Price A price figure that follows the billing interval of the Pricing block around it. * Badge A small inline label or status pill with variants and an optional link. * Select A labeled dropdown of predefined options for forms. * Tabs A set of layered sections of content that displays one panel at a time. * Marquee A continuously scrolling, seamless marquee for logos, testimonials, or any content. * Pricing Switch Chooses the billing interval for every price inside the surrounding Pricing block. * Card A card container with header, content, and footer sections. * Input A labeled text, email, or phone field for forms. * Drawer Content Drawer content section for main body content. * Marquee Item A single item within a marquee. * Filter Section One labelled section. Its label becomes both the heading and the dropdown option that reveals it. * Drawer Footer Drawer footer section for footer content. * Sheet Footer Sheet footer section for footer content. * Alert Description Alert description for alert block. * Sheet Content Sheet content section for main body content. * Tooltip Trigger Button or control that toggles the tooltip. * Card Header Card header section for title and description. * Sheet Header Sheet header section for title and description. * Sheet Trigger Button or control that toggles the sheet. * Card Footer Card footer section for actions and buttons. * Accordion Item A single collapsible section with a trigger and panel content. * Drawer Trigger Button or control that toggles the drawer. * Carousel Item A single slide within a carousel. * Card Content Card content section for main body content. * Alert Title Alert title for alert block. * Tab A single tab with its label and panel content. * Tooltip Content Tooltip content section for additional information. * Drawer Header Drawer header section for title and description. ## Installation 1. Ensure the Shadcn theme is installed and activated 2. Upload the `yaycommerce-blocks-for-shadcn-ui` folder to `/wp-content/plugins/` 3. Activate the plugin through the ‘Plugins’ menu in WordPress 4. Start using Shadcn blocks in the Block Editor ## FAQ ### Does this plugin work without the Shadcn theme? No, this plugin is designed specifically as a companion to the Shadcn theme. It requires the Shadcn theme to be active to function properly. ### How do I find the blocks in the editor? All Shadcn blocks are grouped under the “Shadcn” category in the Block Editor. You can also search for them by name (Card, Alert, Badge, etc.). ### Are the blocks responsive? Yes, all blocks are fully responsive and work seamlessly on mobile, tablet, and desktop devices. ### Can I customize the block styles? Yes, blocks inherit styling from the Shadcn theme and support WordPress block editor features like color, spacing, and border customization. ### Do the interactive blocks work without JavaScript? The static content will always display, but interactive features (drawer open/close, tooltip, etc.) require JavaScript to function. ### Where do I find the section patterns? In the block editor, open the inserter and switch to the Patterns tab. The plugin’s patterns are filed under their own section categories – Hero, Pricing, Testimonials, FAQ, Footer and so on – so you can browse by the kind of section you need rather than scrolling one long list. ### Where do form submissions go? Are they stored? They are emailed and nothing is stored. Each submission is sent to the site admin address, or to the recipient set on that specific Form block, and no database table or post type keeps a copy – so export a submission from your inbox if you need it. The first email address in the submission becomes the Reply-To, so answering the notification replies to the visitor. Mail is sent with wp_mail(), so a mail or SMTP plugin is recommended for reliable delivery, and the recipient address is signed by the site, so a visitor cannot redirect a form to somewhere else. ### How are forms protected from spam? Two layers ship by default: a honeypot field that bots fill in and humans never see, and a per-IP rate limit of 5 submissions every 10 minutes. Anything stricter is up to you – the `shadcn_form_validate` filter lets a developer reject a submission for any reason, which is where a captcha or an external spam service would be wired in. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “YayCommerce Blocks for Shadcn UI” is open source software. The following people have contributed to this plugin. Contributors * [ YayCommerce ](https://profiles.wordpress.org/yaycommerce/) [Translate “YayCommerce Blocks for Shadcn UI” into your language.](https://translate.wordpress.org/projects/wp-plugins/yaycommerce-blocks-for-shadcn-ui) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/yaycommerce-blocks-for-shadcn-ui/), check out the [SVN repository](https://plugins.svn.wordpress.org/yaycommerce-blocks-for-shadcn-ui/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/yaycommerce-blocks-for-shadcn-ui/) by [RSS](https://plugins.trac.wordpress.org/log/yaycommerce-blocks-for-shadcn-ui/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### Oct 22, 2026 – Version 1.0.0 First public release. Requires the [Shadcn theme](https://wordpress.org/themes/shadcn/)( or a child of it) to be active. ## Meta * Version **1.0.0** * Last updated **1 week ago** * Active installations **Fewer than 10** * WordPress version ** 6.6 or higher ** * Tested up to **7.1.4** * PHP version ** 7.4 or higher ** * Tags * [blocks](https://wordpress.org/plugins/tags/blocks/)[gutenberg](https://wordpress.org/plugins/tags/gutenberg/) [patterns](https://wordpress.org/plugins/tags/patterns/)[theme](https://wordpress.org/plugins/tags/theme/) * [Advanced View](https://wordpress.org/plugins/yaycommerce-blocks-for-shadcn-ui/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/yaycommerce-blocks-for-shadcn-ui/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/yaycommerce-blocks-for-shadcn-ui/reviews/) ## Contributors * [ YayCommerce ](https://profiles.wordpress.org/yaycommerce/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/yaycommerce-blocks-for-shadcn-ui/)