shadcn_view_component 0.3.3

data/app/components/shadcn/calendar/preview.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Calendar
+    class Preview < ApplicationViewComponentPreview
+      # Upstream's own first example, minus the border it wraps it in: a single
+      # month with today selected.
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Month and Year Selector".
+      def dropdown_caption
+        render_with_template
+      end
+
+      # Upstream's "Range Calendar".
+      def range
+        render_with_template
+      end
+
+      # Upstream's "Presets".
+      def presets
+        render_with_template
+      end
+
+      # Upstream's "Date and Time Picker".
+      def date_and_time
+        render_with_template
+      end
+
+      # Upstream's "Booked dates".
+      def booked
+        render_with_template
+      end
+
+      # Upstream's "Custom Cell Size".
+      def custom_cell_size
+        render_with_template
+      end
+
+      # Upstream's "Week Numbers".
+      def week_numbers
+        render_with_template
+      end
+
+      # The hidden inputs a Rails form posts.
+      def in_a_form
+        render_with_template
+      end
+
+      # The month is an argument here so a month can be asked for by URL. That
+      # is what `spec/system/calendar_spec.rb` compares the browser's own render
+      # against: the grid exists twice — in `Calendar::Month` and in the
+      # controller — and the only thing that keeps the two honest is asking the
+      # server what it would have drawn.
+      #
+      # @param month text
+      def month(month: "2026-09-01")
+        render_component(month: Date.parse(month), class: "rounded-md border shadow-sm")
+      end
+    end
+  end
+end

data/app/components/shadcn/calendar/previews/booked.html.erb

@@ -0,0 +1,18 @@
+<%# Upstream's "Booked dates": the taken days are refused and struck through.
+    `disabled:` takes anything answering `===` — a Date, a Range, or a list of
+    them — so the booking rule is written where the app already keeps it.
+
+    The line through them is the caller's, not the component's: upstream reaches
+    for `modifiers` and `modifiersClassNames`, which this port does not have, and
+    a class on the root reaches the same cells. %>
+<%
+  booked = [ Date.new(2026, 8, 4), Date.new(2026, 8, 5),
+             Date.new(2026, 8, 11)..Date.new(2026, 8, 13),
+             Date.new(2026, 8, 20), Date.new(2026, 8, 26)..Date.new(2026, 8, 28) ]
+%>
+<%= render(Shadcn::Calendar::Component.new(
+      month: Date.new(2026, 8, 1),
+      selected: Date.new(2026, 8, 17),
+      disabled: booked,
+      class: "rounded-md border shadow-sm [&_td[data-disabled]>button]:line-through"
+    )) %>

data/app/components/shadcn/calendar/previews/custom_cell_size.html.erb

@@ -0,0 +1,11 @@
+<%# Upstream's "Custom Cell Size": the whole calendar is sized from one custom
+    property, so a caller changes `--cell-size` and everything follows. %>
+<%= render(Shadcn::Calendar::Component.new(
+      mode: :range,
+      month: Date.new(2026, 8, 1),
+      selected: Date.new(2026, 8, 9)..Date.new(2026, 8, 19),
+      caption_layout: :dropdown,
+      start_month: Date.new(2024, 1, 1),
+      end_month: Date.new(2030, 12, 31),
+      class: "rounded-md border shadow-sm [--cell-size:--spacing(12)]"
+    )) %>

data/app/components/shadcn/calendar/previews/date_and_time.html.erb

@@ -0,0 +1,31 @@
+<%# Upstream's "Date and Time Picker": a date, then the two ends of the day it
+    covers. The times are real `<input type="time">` fields, so the browser's own
+    picker and validation come with them — the same call the gem makes for
+    `native_select`.
+
+    `step` is in *seconds*, so 900 is a quarter of an hour. Measured in Chrome:
+    the field's arrows then move 09:00 → 09:15 → 09:30, and a typed 09:07 is
+    refused at submit with the browser's own message. What it does not do is
+    turn the field into a list — the segments still take any digits, and the
+    complaint comes afterwards. Where only a quarter-hour will do, the control
+    is a `<select>` rather than this one. %>
+<div class="w-fit rounded-md border shadow-sm">
+  <%= render(Shadcn::Calendar::Component.new(
+        month: Date.new(2026, 8, 1),
+        selected: Date.new(2026, 8, 12)
+      )) %>
+  <div class="flex gap-3 border-t p-3">
+    <%= render(Shadcn::Field::Component.new(class: "flex-1")) do |field| %>
+      <% field.with_label(for: "calendar-start-time") { "Start Time" } %>
+      <% field.with_field_content do %>
+        <%= render(Shadcn::Input::Component.new(id: "calendar-start-time", type: "time", value: "09:00", step: 900)) %>
+      <% end %>
+    <% end %>
+    <%= render(Shadcn::Field::Component.new(class: "flex-1")) do |field| %>
+      <% field.with_label(for: "calendar-end-time") { "End Time" } %>
+      <% field.with_field_content do %>
+        <%= render(Shadcn::Input::Component.new(id: "calendar-end-time", type: "time", value: "17:00", step: 900)) %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/components/shadcn/calendar/previews/default.html.erb

@@ -0,0 +1,8 @@
+<%# Upstream's "Calendar" example. The month is fixed rather than `Date.current`
+    so the snapshot does not change every day — the same reason the component
+    takes `month:` at all. %>
+<%= render(Shadcn::Calendar::Component.new(
+      month: Date.new(2026, 8, 1),
+      selected: Date.new(2026, 8, 12),
+      class: "rounded-md border shadow-sm"
+    )) %>

data/app/components/shadcn/calendar/previews/dropdown_caption.html.erb

@@ -0,0 +1,11 @@
+<%# Upstream's "Month and Year Selector": the caption becomes two native
+    `<select>`s laid invisible over the label, so the control is the real one and
+    what you read is the span underneath it. %>
+<%= render(Shadcn::Calendar::Component.new(
+      month: Date.new(2026, 8, 1),
+      selected: Date.new(2026, 8, 12),
+      caption_layout: :dropdown,
+      start_month: Date.new(2020, 1, 1),
+      end_month: Date.new(2030, 12, 31),
+      class: "rounded-md border shadow-sm"
+    )) %>

data/app/components/shadcn/calendar/previews/in_a_form.html.erb

@@ -0,0 +1,8 @@
+<%# The half a Rails form sees: the component renders the hidden inputs and the
+    controller rewrites them, so `params[:booking][:on]` is a date the model can
+    take. With a model, `f.shadcn_calendar :on` does all of this. %>
+<%= render(Shadcn::Calendar::Component.new(
+      month: Date.new(2026, 8, 1),
+      name: "booking[on]",
+      class: "rounded-md border shadow-sm"
+    )) %>

data/app/components/shadcn/calendar/previews/presets.html.erb

@@ -0,0 +1,20 @@
+<%# Upstream's "Presets": five shortcuts beside the month. Upstream's own
+    example holds them in React state; here the offset in days rides on the
+    button and the controller does the arithmetic, so a host writes no
+    JavaScript. The buttons are block content, which lands inside the root —
+    which is what lets their `data-action` reach the controller. %>
+<%= render(Shadcn::Calendar::Component.new(
+      month: Date.current,
+      class: "rounded-md border shadow-sm"
+    )) do %>
+  <div class="flex flex-col gap-2 border-t pt-3">
+    <% { "Today" => 0, "Tomorrow" => 1, "In 3 days" => 3, "In a week" => 7, "In 2 weeks" => 14 }.each do |label, offset| %>
+      <%= render(Shadcn::Button::Component.new(
+            variant: :outline,
+            size: :sm,
+            "data-action": "click->shadcn--calendar#preset",
+            "data-shadcn--calendar-offset-param": offset
+          )) { label } %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/shadcn/calendar/previews/range.html.erb

@@ -0,0 +1,10 @@
+<%# Upstream's "Range Calendar": two months side by side and one range across
+    both. The two ends are two dates, so in a form they are two attributes —
+    `f.shadcn_calendar :starts_on, mode: :range, to: :ends_on`. %>
+<%= render(Shadcn::Calendar::Component.new(
+      mode: :range,
+      month: Date.new(2026, 1, 1),
+      selected: Date.new(2026, 1, 12)..Date.new(2026, 2, 10),
+      number_of_months: 2,
+      class: "rounded-md border shadow-sm"
+    )) %>

data/app/components/shadcn/calendar/previews/week_numbers.html.erb

@@ -0,0 +1,8 @@
+<%# Upstream's "Week Numbers". The number is ISO-8601 — `Date#cweek` — where
+    upstream's follows the locale, which is written up in features/calendar.md. %>
+<%= render(Shadcn::Calendar::Component.new(
+      month: Date.new(2026, 1, 1),
+      selected: Date.new(2026, 1, 15),
+      show_week_number: true,
+      class: "rounded-md border shadow-sm"
+    )) %>

data/app/components/shadcn/card/component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Card
+    # Port of registry/new-york-v4/ui/card.tsx
+    class Component < ApplicationViewComponent
+      renders_one :header, "Shadcn::Card::Header::Component"
+      renders_one :card_content, "Shadcn::Card::Content::Component"
+      renders_one :footer, "Shadcn::Card::Footer::Component"
+
+      slot_name :card
+
+      style do
+        base {
+          "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm"
+        }
+      end
+
+      def call
+        render_element(body: safe_join([ header, card_content, footer, content ].compact))
+      end
+    end
+  end
+end

data/app/components/shadcn/card/header/component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Card
+    module Header
+      class Component < ApplicationViewComponent
+        renders_one :title, "Shadcn::Card::Title::Component"
+        renders_one :description, "Shadcn::Card::Description::Component"
+        renders_one :action, "Shadcn::Card::Action::Component"
+
+        slot_name :"card-header"
+
+        style do
+          base {
+            "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start " \
+            "gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"
+          }
+        end
+
+        def call
+          render_element(body: safe_join([ title, description, action, content ].compact))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/card/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Card
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Image".
+      def image
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/card/previews/default.html.erb

@@ -0,0 +1,18 @@
+<%= render(Shadcn::Card::Component.new(class: "w-full max-w-sm")) do |card| %>
+  <% card.with_header do |h| %>
+    <% h.with_title { "Login to your account" } %>
+    <% h.with_description { "Enter your email below to login." } %>
+    <% h.with_action do %>
+      <%= render(Shadcn::Button::Component.new(variant: :link, size: :sm)) { "Sign Up" } %>
+    <% end %>
+  <% end %>
+  <% card.with_card_content do %>
+    <div class="flex flex-col gap-4">
+      <%= render(Shadcn::Label::Component.new(for: "email")) { "Email" } %>
+      <%= render(Shadcn::Input::Component.new(id: "email", type: "email", placeholder: "m@example.com")) %>
+    </div>
+  <% end %>
+  <% card.with_footer(class: "flex-col gap-2") do %>
+    <%= render(Shadcn::Button::Component.new(class: "w-full")) { "Login" } %>
+  <% end %>
+<% end %>

data/app/components/shadcn/card/previews/image.html.erb

@@ -0,0 +1,37 @@
+<%# Upstream's "Image": the picture is the card's first child, full width, and
+    the card's top padding comes off so it sits flush against the edge.
+
+    Everything is rendered in the *block*, none of it through the `header` and
+    `footer` slots. `Card#call` emits its slots and then the block, so an image
+    written first but passed as block content lands last — under the footer,
+    which is what the first version of this preview did. Upstream has no such
+    reordering: its Card renders `{children}` and the source order is the DOM
+    order. The select and dropdown previews render their items in the block for
+    the same reason.
+
+    Two more things are the caller's here and the component's there. The Card in
+    the registry this gem ports is `flex flex-col gap-6 rounded-xl border
+    bg-card py-6 …` and nothing else — no `has-[>img:first-child]:pt-0`, no
+    `*:[img:first-child]:rounded-t-xl` — so `pt-0` and `overflow-hidden` are
+    written out. Measured on the docs page on 2026-08-12, where the Card also
+    carries `--card-spacing`, `ring-1 ring-foreground/10` and a `size`, none of
+    which is in `vendor/shadcn/ui/card.tsx`: that is the other registry, and it
+    is why this is close rather than identical.
+
+    The footer's top padding is not written here: `card-footer` carries
+    `[.border-t]:pt-6`, so giving it a border is what asks for it.
+
+    A block of colour rather than a photograph: the gallery ships no binary
+    assets, and `aspect-video w-full` is the part of the shape that matters. %>
+<%= render(Shadcn::Card::Component.new(class: "w-full max-w-sm overflow-hidden pt-0")) do %>
+  <div class="flex aspect-video w-full items-center justify-center bg-muted text-sm text-foreground/70">
+    Where the picture goes
+  </div>
+  <%= render(Shadcn::Card::Header::Component.new) do |h| %>
+    <% h.with_title { "Lakeside cabin" } %>
+    <% h.with_description { "Two bedrooms, one jetty." } %>
+  <% end %>
+  <%= render(Shadcn::Card::Footer::Component.new(class: "border-t bg-muted/50")) do %>
+    <%= render(Shadcn::Button::Component.new(class: "w-full")) { "Book" } %>
+  <% end %>
+<% end %>

data/app/components/shadcn/card.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Card family that are just an element with a
+  # `data-slot` and a fixed set of classes. Anything with variants, slots or
+  # markup of its own keeps its own `component.rb`.
+  module Card
+    extend Parts
+
+    part :action, slot: "card-action",
+                  classes: "col-start-2 row-span-2 row-start-1 self-start justify-self-end"
+
+    part :content, slot: "card-content", classes: "px-6"
+
+    part :description, slot: "card-description", classes: "text-sm text-muted-foreground"
+
+    part :footer, slot: "card-footer", classes: "flex items-center px-6 [.border-t]:pt-6"
+
+    part :title, slot: "card-title", classes: "leading-none font-semibold"
+  end
+end

data/app/components/shadcn/carousel/component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Carousel
+    # Port of registry/new-york-v4/ui/carousel.tsx
+    #
+    # Upstream builds this on **embla-carousel**, and this port does not. That
+    # is a measurement rather than a preference: of embla's 3,170 lines,
+    # `carousel.tsx` reaches for six things — `scrollPrev`, `scrollNext`,
+    # `canScrollPrev`, `canScrollNext` and the `select`/`reInit` events — and
+    # everything else about the component is flex markup and two buttons.
+    #
+    # The six are what a scroll container already answers. The viewport is a
+    # scroller with snap points, so the browser does the dragging, the momentum
+    # and the snapping, and this controller reads `scrollLeft` for the two
+    # `canScroll` questions and writes it for the two `scroll` ones. It is the
+    # same trade `scroll-area` made — the layout is CSS, and the controller
+    # computes a number per axis.
+    #
+    # What is *not* reproduced is in features/carousel.md: `opts` (embla's
+    # `loop`, `align`, `slidesToScroll`), the `api` object, its event stream,
+    # and plugins. None has markup, so `parity_spec` cannot see their absence;
+    # the feature doc is where that is written down.
+    class Component < ApplicationViewComponent
+      renders_one :carousel_content, "Shadcn::Carousel::Content::Component"
+      renders_one :previous, "Shadcn::Carousel::Previous::Component"
+      renders_one :next_control, "Shadcn::Carousel::Next::Component"
+
+      slot_name :carousel
+
+      style do
+        base { "relative" }
+      end
+
+      attr_reader :orientation
+
+      def initialize(orientation: :horizontal, **attributes)
+        @orientation = orientation&.to_sym == :vertical ? :vertical : :horizontal
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          role: "region",
+          "aria-roledescription" => "carousel",
+          "data-orientation" => orientation,
+          "data-controller" => "shadcn--carousel",
+          "data-shadcn--carousel-orientation-value" => orientation,
+          # Capture, as upstream does (`onKeyDownCapture`, carousel.tsx:119): a
+          # slide can hold controls of its own, and one that stops a keydown
+          # would otherwise take the carousel's arrows with it.
+          "data-action" => "keydown->shadcn--carousel#keydown:capture"
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ carousel_content, previous, next_control, content ].compact))
+      end
+    end
+  end
+end

data/app/components/shadcn/carousel/content/component.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Carousel
+    module Content
+      # CarouselContent — the viewport, with the flex track inside it.
+      #
+      # The viewport keeps upstream's `overflow-hidden` and nothing else, which
+      # matters: `overflow: hidden` still makes an element a scroll container,
+      # so `scrollLeft` works on it even though a person cannot drag it. What
+      # turns dragging back on is a rule in `shadcn.css` keyed on this
+      # `data-slot`, beside the one that hides the scroll area's scrollbars —
+      # the same shape of answer, in the same place.
+      class Component < ApplicationViewComponent
+        renders_many :items, "Shadcn::Carousel::Item::Component"
+
+        slot_name :"carousel-content"
+
+        style do
+          base { "overflow-hidden" }
+        end
+
+        attr_reader :orientation
+
+        def initialize(orientation: :horizontal, **attributes)
+          @orientation = orientation&.to_sym == :vertical ? :vertical : :horizontal
+          # Held for the track and kept off the viewport, which is upstream's
+          # arrangement: `{...props}` and the className land on the inner div.
+          @track = attributes
+          super()
+        end
+
+        # The caller's attributes went to the track above, so the viewport is
+        # given only its own.
+        def element_attributes(**defaults)
+          super(**{
+            # Upstream sets no tabindex, and upstream's viewport is not a
+            # scroller: embla translates a track inside a hidden overflow, so
+            # there is no region for a keyboard to be shut out of. Ours is a
+            # scroller, which is the whole mechanism, and axe fails a scrollable
+            # region with no keyboard access — the same divergence, for the same
+            # reason, as `scroll-area-viewport`.
+            #
+            # It earns its place beyond the audit: Tab reaches the slides and
+            # the arrows move them, where before the only way through was the
+            # two buttons.
+            tabindex: "0",
+            role: "group",
+            "aria-roledescription" => "slides",
+            "data-orientation" => orientation,
+            "data-shadcn--carousel-target" => "viewport"
+          }.merge(defaults))
+        end
+
+        # Upstream gives the *track* the caller's className and leaves the
+        # viewport with `overflow-hidden` and nothing else (carousel.tsx:138-152).
+        # This port had it the other way round, so a preview asking for a
+        # smaller gutter with `-ml-2` put it on the viewport, where it does
+        # nothing, while the track kept `-ml-4` and the items took `pl-2`. A
+        # gutter that disagrees with its own padding is a slide whose content
+        # starts outside the window, which is a card with no left border.
+        def call
+          render_element(body: tag.div(safe_join([ items, content ].flatten.compact), **track_attributes))
+        end
+
+        private
+
+        def track_attributes
+          extra = @track.except(:class, "class")
+
+          # Merged rather than concatenated: a caller asking for a smaller gutter
+          # passes `-ml-2`, and `flex -ml-4 -ml-2` leaves both in the attribute
+          # for the cascade to arbitrate. `cn` is what resolves that everywhere
+          # else in this port.
+          extra.merge(class: ShadcnViewComponent.cn(track_classes, @track[:class] || @track["class"]))
+        end
+
+        def track_classes
+          horizontal? ? "flex -ml-4" : "flex -mt-4 flex-col"
+        end
+
+        def horizontal? = orientation == :horizontal
+      end
+    end
+  end
+end

data/app/components/shadcn/carousel/item/component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Carousel
+    module Item
+      # CarouselItem — one slide, full width until the caller says otherwise
+      # with a `basis-*` of its own, which is upstream's "Sizes" example.
+      class Component < ApplicationViewComponent
+        slot_name :"carousel-item"
+
+        style do
+          base { "min-w-0 shrink-0 grow-0 basis-full" }
+
+          variants {
+            orientation {
+              horizontal { "pl-4" }
+              vertical { "pt-4" }
+            }
+          }
+
+          defaults { { orientation: :horizontal } }
+        end
+
+        attr_reader :orientation
+
+        def initialize(orientation: :horizontal, **attributes)
+          @orientation = orientation&.to_sym == :vertical ? :vertical : :horizontal
+          super(**attributes)
+        end
+
+        def style_variants = { orientation: }
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "group",
+            "aria-roledescription" => "slide"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/carousel/next/component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Carousel
+    module Next
+      # CarouselNext — the button's own variants, as `pagination-link` takes
+      # them: upstream renders a `<Button variant="outline" size="icon">` and
+      # adds its placement on top, so the classes come from
+      # `Button.variant_classes` rather than from a style block of this
+      # component's own. Redefining `style` here would *replace* the button's
+      # base rather than add to it, which is a round control with no round.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"carousel-next"
+
+        PLACEMENT = {
+          horizontal: "top-1/2 -right-12 -translate-y-1/2",
+          vertical: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90"
+        }.freeze
+
+        attr_reader :orientation, :variant, :size
+
+        def initialize(orientation: :horizontal, variant: :outline, size: :icon, **attributes)
+          @orientation = orientation&.to_sym == :vertical ? :vertical : :horizontal
+          @variant = variant&.to_sym || :outline
+          @size = size&.to_sym || :icon
+          super(**attributes)
+        end
+
+        # Disabled until the controller says otherwise: at rest a carousel is at
+        # one end, and which end has room is a question about a viewport the
+        # server has never measured.
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            disabled: true,
+            "data-shadcn--carousel-target" => "next",
+            "data-action" => "click->shadcn--carousel#next"
+          }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          Button::Component.variant_classes(
+            variant:,
+            size:,
+            class: [ "absolute size-8 rounded-full", PLACEMENT.fetch(orientation), extra ].compact.join(" ")
+          )
+        end
+
+        def call
+          render_element(body: safe_join([
+            render(Icon::Component.new("arrow-right")),
+            tag.span(shadcn_t("carousel.next"), class: "sr-only")
+          ]))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/carousel/preview.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Carousel
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Sizes" and "Spacing": both are the caller's classes on the
+      # item, which is why neither is an argument.
+      def sizes
+        render_with_template
+      end
+
+      # Upstream's "Orientation".
+      def vertical
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/carousel/previews/default.html.erb

@@ -0,0 +1,22 @@
+<%# Upstream's own example: five slides, each the width of the viewport, with
+    the two controls sitting outside the box — `-left-12` and `-right-12`, which
+    is why the page needs room around it. %>
+<div class="px-14">
+  <%= render(Shadcn::Carousel::Component.new(class: "w-full max-w-xs")) do |c| %>
+    <% c.with_carousel_content do |content| %>
+      <% 5.times do |i| %>
+        <% content.with_item do %>
+          <div class="p-1">
+            <%= render(Shadcn::Card::Component.new) do |card| %>
+              <% card.with_card_content(class: "flex aspect-square items-center justify-center p-6") do %>
+                <span class="text-4xl font-semibold"><%= i + 1 %></span>
+              <% end %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+    <% c.with_previous %>
+    <% c.with_next_control %>
+  <% end %>
+</div>