VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="max-w-sm">
  <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">Account Settings</h3>
      <p class="text-sm text-muted-foreground">Update your account preferences.</p>
    </div>
    <div class="p-6 pt-0 first:pt-6">      
      <div class="space-y-4">
        <div class="space-y-2">
          <label for="name" class="text-sm font-medium">Display Name</label>
          <input id="name" placeholder="Enter your name" type="text" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 px-3 py-2 text-sm">
        </div>
        <div class="space-y-2">
          <label for="username" class="text-sm font-medium">Username</label>
          <input id="username" placeholder="@username" type="text" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 px-3 py-2 text-sm">
        </div>
      </div>
    </div>
    <div class="flex items-center p-6 pt-0">      
      <div class="flex gap-2">
        <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! h-8 rounded-md px-3 text-xs disabled:cursor-not-allowed" aria-busy="false">Save Changes</button>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="max-w-sm">
  <%= render(UI::Card.new) do |card| %>
    <% card.with_header do |header| %>
      <% header.with_title { "Account Settings" } %>
      <% header.with_description { "Update your account preferences." } %>
    <% end %>
    <% card.with_content do %>
      <div class="space-y-4">
        <div class="space-y-2">
          <%= render(UI::Label.new(for: "name")) { "Display Name" } %>
          <%= render(UI::Input.new(id: "name", placeholder: "Enter your name")) %>
        </div>
        <div class="space-y-2">
          <%= render(UI::Label.new(for: "username")) { "Username" } %>
          <%= render(UI::Input.new(id: "username", placeholder: "@username")) %>
        </div>
      </div>
    <% end %>
    <% card.with_footer do %>
      <div class="flex gap-2">
        <%= render(UI::Button.new(variant: :primary, size: :sm)) { "Save Changes" } %>
      </div>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.