VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<div class="rounded-xl border bg-card text-card-foreground shadow">
  <div class="flex flex-col gap-1.5 p-6">
    <h3 class="text-lg font-semibold leading-none tracking-tight">Create project</h3>
    <p class="text-sm text-muted-foreground">Deploy your new project in one click.</p>
  </div>
  <div class="p-6 pt-0 first:pt-6">
    <p class="text-sm text-muted-foreground">Card body content goes here.</p>
  </div>
  <div class="flex items-center p-6 pt-0">
    <div class="flex gap-2">{args: {}, block: #<Proc:0x00007f623c39b340 /velvetkit/registry/test/components/previews/ui/card_preview.rb:21>, component: #<UI::Button:0x00007f622ab32958 @variant=:primary, @size=:sm, @type=:button, @full_width=false, @loading=false, @disabled=false, @as_child=false, @user_class=nil, @html_attrs={}>, locals: {}, template: "view_components/preview"}{args: {}, block: #<Proc:0x00007f623c39b278 /velvetkit/registry/test/components/previews/ui/card_preview.rb:22>, component: #<UI::Button:0x00007f622ab32818 @variant=:outline, @size=:sm, @type=:button, @full_width=false, @loading=false, @disabled=false, @as_child=false, @user_class=nil, @html_attrs={}>, locals: {}, template: "view_components/preview"}</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
render(UI::Card.new) do |card|
  card.with_header do |header|
    header.with_title { title }
    header.with_description { description }
  end
  card.with_content do
    tag.p(class: "text-sm text-muted-foreground") { "Card body content goes here." }
  end
  if show_footer
    card.with_footer do
      tag.div(class: "flex gap-2") do
        safe_join([
          render(UI::Button.new(variant: :primary, size: :sm)) { "Deploy" },
          render(UI::Button.new(variant: :outline, size: :sm)) { "Cancel" }
        ])
      end
    end
  end
end

No notes provided.

Param Description Input

—

—

—