shadcnblocks

Menu listing locales with radio selection for interface language.

Menu with checkbox toggles for notifications, sounds, and compact mode.

Menu toggling email, push, and in-app notification channels.

Menu controlling list density, column visibility, or layout mode.

Radix DropdownMenu with icon-leading items and separator groups.

DropdownMenu with labeled sections grouping related menu items.

Menu items showing keyboard shortcut hints on the trailing side.

DropdownMenuCheckboxItem entries toggling column or filter visibility.

DropdownMenuRadioGroup enforcing a single selected option among items.

DropdownMenuSub opening a secondary menu for related child actions.

Dropdown combining icons, shortcuts, checkboxes, and nested submenus.

Help menu with documentation, contact support, and status links.

Menu with keyboard shortcuts, tours, and FAQ entries.

Menu linking to blog, changelog, API docs, and downloads.

Dropzone restricted to image file types.

Dropzone accepting more than one file at a time.

Dropzone showing content state after a file is selected.

Dropzone with a maxSize constraint and caption.

Basic dropzone for uploading one file.

This component is designed for creating a customizable footer section with multiple sections such as contact information, social media links, shop categories, and support resources, organized in an accordion layout to enhance user interaction. It includes a newsletter subscription form, language selection, payment method icons, and a logo display, providing comprehensive footer functionality for user engagement and navigation.

This component provides a comprehensive footer block for digital platforms, featuring sections for a newsletter subscription, contact information, and footer navigation links. It includes integrated social media links and payment method icons, offering a versatile foundation for enhancing user engagement and site navigation.

This component serves as a comprehensive footer block featuring a newsletter subscription form, a multilingual section for various language selections, and contact information including social media links. It includes customizable sections for footer links, enabling users to provide important information such as policies and collections, enhancing navigation and connectivity options for the user.

This component is a versatile and interactive footer block designed to enhance user engagement through features like a newsletter subscription form and social media links. It organizes helpful site links, payment methods, and additional footer information, making it a comprehensive footer solution for any web application.

This component is a footer block designed for webpage applications, featuring sections for newsletter subscriptions, navigational footer links, and social media icons. It includes form validation using a schema to ensure proper email input and utilizes an accordion layout for organized display of various informational links.

This component serves as a detailed footer block that includes sections for store locations, company information, social media, app promotion, and payment methods. It features links to various store addresses, provides company policies and help topics, showcases social media icons, encourages app downloads, and displays supported payment options.

An autoplay carousel on a primary-colored panel where each slide shows two columns with tall scene photos, overlaid product cards, and section titles beneath.

A two-row mobile, two-column desktop hero where each panel is full-bleed media with a dark scrim, either a headline and CTA or an inline product card with sale pricing.

A rounded full-width hero with a dimmed background photo, left column copy and primary CTA, and right column autoplay carousel of product cards with quick view and prices.

A three-column desktop layout with a large photo hero and CTA in two columns and a vertical autoplay product carousel in the third, with optional collection labels and quick actions on each card.

A full-viewport autoplay carousel where each slide pairs full-bleed image or video with headline, copy, CTA, and a rich product card with gallery, badges, rating, and price.

A full-viewport autoplay hero with large background slides and serif headline copy, plus a linked thumbnail carousel of featured products that stays in sync with the main track.

A full ecommerce header with logo, search, cart, and user actions, mega menus with image columns and featured tiles, currency or locale select, and a mobile sheet with contact row and social links.

An ecommerce header with primary nav, search, cart with badge, wishlist and account entry, nested dropdowns and mega panels on desktop, and an accordion-based mobile sheet with grouped help and account links.

Format selected text with a floating bubble menu.

Syntax-highlighted code blocks with inline code marks.

Rich text field with a character limit and live counter.

Checklist, unordered, and numbered lists in one editor.

Insert blocks with slash commands or the empty-line floating menu.

Full TipTap editor with slash commands, bubble menu, floating menu, and tables.

Rich-text table with row, column, and cell management menus.

Always-visible toolbar for block types and inline formatting.

shadcnblocks EmojiPicker in a popover opened from an icon button.

EmojiPicker opened from a custom-styled trigger instead of the default button.

Multiple triggers showing emoji picker on outline, ghost, and secondary buttons.

Message textarea with adjacent emoji picker appending symbols on select.

A popover emoji grid with search, category tabs, recent history, and keyboard navigation.

Text or link-style trigger opening the emoji popover.

Picker plus preview area showing the currently selected emoji.