shadcnblocks

Tooltip - Default pattern using the shadcn component with its key configuration options.

Tooltip - Formatter pattern using the shadcn component with its key configuration options.

Tooltip - Icons pattern using the shadcn component with its key configuration options.

Tooltip - Line Indicator pattern using the shadcn component with its key configuration options.

Tooltip - No Indicator pattern using the shadcn component with its key configuration options.

Tooltip - Custom Label pattern using the shadcn component with its key configuration options.

Tooltip - Label Formatter pattern using the shadcn component with its key configuration options.

Tooltip - No Label pattern using the shadcn component with its key configuration options.

Checkbox with supporting description text below the label.

Checkbox with subtitle and description for detailed opt-in.

Nested checkbox list with parent and child options.

Single labeled checkbox for binary opt-in.

Parent checkbox in indeterminate state for partial selection.

Checkbox with a subtitle label above the control.

Checkbox in disabled state that cannot be toggled.

Todo-style checkbox with completed strikethrough state.

Checkbox with a custom check indicator component.

Multiple checkboxes arranged in a horizontal row.

Multiple checkboxes stacked in a vertical list.

Checkbox aligned to the right with label on the left.

This component facilitates an interactive checkout process, allowing users to input personal details, select shipping options, and choose a saved payment method from a list. It features sections for displaying the product list, summary of charges, and detailed payment and shipping data entry fields, offering a comprehensive solution for handling checkout functionality in applications.

This component provides a multi-step checkout process including contact, shipping, payment, and review steps, allowing users to manage order details and progress through the purchase journey. Features include interactive form handling, step navigation, product listing, and a detailed order summary to enhance the user shopping experience.

This component is a checkout block that facilitates online purchasing by managing cart items and payment details. It features forms for user information, address, shipping methods, and payment options, integrating an accordion layout for a step-by-step process.

This component facilitates a comprehensive e-commerce checkout process, allowing users to input contact information, shipping address, choose a shipping method, and select a payment method. It includes an order summary where users can view, modify quantities, and remove items from their shopping cart before finalizing their purchase.

This component facilitates a comprehensive checkout process, integrating functionalities for managing cart items, collecting contact and address details, and selecting payment and shipping methods. Designed with a flexible schema validation, it supports multiple payment options including credit card and PayPal, and features collapsible sections to streamline the user experience.

This component serves as a comprehensive checkout block that handles both shopping cart management and payment processing. Users can manage item quantities, view total prices, and choose from multiple payment methods, including credit card and PayPal, while ensuring form validation using Zod and React Hook Form.

The component provides a detailed checkout form that includes order summary, email input, card payment details, and promo code application, using react-hook-form and zod for validation. It allows users to input billing information, apply a coupon code, and choose payment methods like card or Apple Pay.

This component is a comprehensive checkout form that facilitates the entire purchase process, including cart overview, address entry, and payment methods. It leverages the `react-hook-form` library for form handling and supports multiple payment options such as credit card, PayPal, and bank transfers.

Full billing selector with titles, subtitles, and descriptions.

Choicebox items with title and description text.

Two card-style radio options with default selection.

Choicebox items with a title and muted subtitle.

Three selectable plan cards in a vertical stack.

Code block with filename label and copy button in the header.

Code block header with a copy-to-clipboard button.

Code block with lineNumbers enabled on the active snippet.

Multiple files with a header select to switch between snippets.

Plain code display with syntaxHighlighting set to false.

Single TypeScript code snippet with syntax highlighting.

A centered hero explaining database connectivity, language pickers with logos, framework tabs or a mobile select, sample Postgres-oriented snippets per stack, copy control, and a documentation link.

A file-management hero with dotted radial backdrop, dual CTAs, accordion rows for create, update, and delete flows, and a synced TypeScript example in a scrollable code block with copy.

A centered analytics pitch with eyebrow, headline, supporting copy, primary CTA, and a code panel that switches among server, client hook, and React UI examples via tabs or a compact selector.

This component serves as a versatile code example block that allows users to explore and copy multi-language database query examples, such as JavaScript, Python, Go, and Ruby, with integration for ORMs and raw SQL. It features tabbed navigation to switch between languages, a copy button for ease of use, and displays relevant file names for each example.

This component provides a visual interface for displaying code examples of HTTP requests in multiple programming languages, including JavaScript, Python, and Go. It features a code block with selectable files, language switching options, and a button for copying code, making it ideal for educational or documentation purposes.

This component showcases the use of custom hooks to manage and toggle themes within a React application. It includes interactive code blocks and provides a clear implementation example, demonstrating how to integrate theme switching with a button and visual indicators.

This component provides an intuitive interface for exploring a file structure with a tree view and examining the content of selected files in a code block. Ideal for users looking to navigate through and interact with code examples effectively, it facilitates seamless file browsing and code inspection within a component library.

This component provides a code explorer, allowing users to interactively select and view code examples for different API integrations including REST, GraphQL, and WebSocket. It features language switching tabs, displays code snippets with syntax highlighting, and offers a copy-to-clipboard functionality.

A marketing section with a headline, three selectable snippet cards for debounce, local storage, and fetch hooks, a syntax-highlighted code block with copy control, and an outline CTA.