Carousel tile radio group

Tile-based selector where each option has its own image carousel. Supports single or multiple selection.

ExperimentalBold, innovative designs that push creative boundaries and challenge conventional aesthetics.

GrungeRaw, edgy designs with textured elements and a rebellious spirit that creates visual tension.

MinimalClean, simple designs that emphasize essential elements with plenty of white space for clarity.

Photo DrivenDesigns that center around powerful imagery and photography as the main visual foundation.

ProfessionalClean, corporate-friendly designs that convey trust and competence with structured layouts.

Type DrivenDesigns where typography takes center stage, using creative font combinations and dynamic layouts.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/carousel-tile-radio-group.json

Usage

Import the block, declare your tile items, and pass them in.

TSImport

import {
  CarouselTileRadioGroup,
  type CarouselTileItem,
} from "@/components/blocks/carousel-tile-radio-group";

TSExample

import * as React from "react";
import {
  CarouselTileRadioGroup,
  type CarouselTileItem,
} from "@/components/blocks/carousel-tile-radio-group";

const designStyles: CarouselTileItem[] = [
  {
    value: "minimal",
    label: "Minimal",
    description: "Clean, simple designs with plenty of white space.",
    imageUrls: ["/styles/minimal-1.webp", "/styles/minimal-2.webp"],
  },
  {
    value: "grunge",
    label: "Grunge",
    description: "Raw, edgy designs with textured elements.",
    imageUrls: ["/styles/grunge-1.webp", "/styles/grunge-2.webp"],
  },
  {
    value: "professional",
    label: "Professional",
    description: "Clean, corporate-friendly designs.",
    imageUrls: ["/styles/professional-1.webp", "/styles/professional-2.webp"],
  },
];

export function Example() {
  const [selected, setSelected] = React.useState("");
  return (
    <CarouselTileRadioGroup
      name="design-style"
      items={designStyles}
      onChange={setSelected}
    />
  );
}

Composition

Anatomy of the carousel tile radio group.

CarouselTileRadioGroup
├── Tile (one per item)
│   ├── Carousel (auto-cycles imageUrls)
│   ├── Label
│   └── Description
└── Selection control (radio for single, checkbox when multiple)

Auto-play carousels (single select)

Each tile cycles through its image set every 3 seconds.

ExperimentalBold, innovative designs that push creative boundaries and challenge conventional aesthetics.

GrungeRaw, edgy designs with textured elements and a rebellious spirit that creates visual tension.

MinimalClean, simple designs that emphasize essential elements with plenty of white space for clarity.

Photo DrivenDesigns that center around powerful imagery and photography as the main visual foundation.

ProfessionalClean, corporate-friendly designs that convey trust and competence with structured layouts.

Type DrivenDesigns where typography takes center stage, using creative font combinations and dynamic layouts.

Auto-play disabled

Static tiles with a pre-selected default.

ExperimentalBold, innovative designs that push creative boundaries and challenge conventional aesthetics.

GrungeRaw, edgy designs with textured elements and a rebellious spirit that creates visual tension.

MinimalClean, simple designs that emphasize essential elements with plenty of white space for clarity.

With disabled item

Individual tiles can be made non-interactive.

ExperimentalBold, innovative designs that push creative boundaries and challenge conventional aesthetics.

GrungeRaw, edgy designs with textured elements and a rebellious spirit that creates visual tension.

MinimalClean, simple designs that emphasize essential elements with plenty of white space for clarity.

Multiple selection

Checkbox variant; choose any number of styles.

ExperimentalBold, innovative designs that push creative boundaries and challenge conventional aesthetics.

GrungeRaw, edgy designs with textured elements and a rebellious spirit that creates visual tension.

MinimalClean, simple designs that emphasize essential elements with plenty of white space for clarity.

Photo DrivenDesigns that center around powerful imagery and photography as the main visual foundation.

ProfessionalClean, corporate-friendly designs that convey trust and competence with structured layouts.

Type DrivenDesigns where typography takes center stage, using creative font combinations and dynamic layouts.

With arrow navigation

Prev/next arrows appear on hover.

ExperimentalBold, innovative designs that push creative boundaries and challenge conventional aesthetics.

GrungeRaw, edgy designs with textured elements and a rebellious spirit that creates visual tension.

MinimalClean, simple designs that emphasize essential elements with plenty of white space for clarity.

API Reference

Props exposed by the CarouselTileRadioGroup block and its item shape.

CarouselTileRadioGroup

Prop	Type	Default	Description
`name`	string	—	Form field name (required for native form integration).
`items`	CarouselTileItem[]	—	Array of tile configs.
`value`	string \| string[]	—	Controlled value. String for single, array for multiple.
`defaultValue`	string \| string[]	—	Uncontrolled initial value.
`onChange`	(value: string \| string[]) => void	—	Selection change handler.
`multiple`	boolean	false	Allow multiple selection (renders as checkboxes).
`columns`	number	auto	Override the auto-resolved column count.
`autoPlayInterval`	number	3000	ms between image rotations. Set to 0 to disable auto-play.
`showArrows`	boolean	false	Render prev/next arrows on hover.

CarouselTileItem

Prop	Type	Default	Description
`value`	string	—	Unique value submitted on selection.
`label`	string	—	Tile heading.
`description`	string	—	Sub-text rendered under the label.
`imageUrls`	string[]	—	Images cycled by the per-tile carousel.
`disabled`	boolean	false	Lock this tile out.