# VelvetKit

## Text (`UI::Text`)

Body text in set sizes, weights and tones.

Add it: `bin/rails generate velvetkit:add text`

### Arguments

```ruby
UI::Text.new(as: :p, size: :base, weight: :normal, tone: :default, class: nil, **html_attrs)
```

### Example: Sizes

```erb
<div class="space-y-4">
  <%= render(UI::Text.new(size: :xs)) { "Extra Small (xs) — The quick brown fox" } %>
  <%= render(UI::Text.new(size: :sm)) { "Small (sm) — The quick brown fox" } %>
  <%= render(UI::Text.new(size: :base)) { "Base — The quick brown fox" } %>
  <%= render(UI::Text.new(size: :lg)) { "Large (lg) — The quick brown fox" } %>
  <%= render(UI::Text.new(size: :xl)) { "Extra Large (xl) — The quick brown fox" } %>
  <%= render(UI::Text.new(size: :"2xl")) { "2XL — The quick brown fox" } %>
  <%= render(UI::Text.new(size: :"3xl")) { "3XL — The quick brown fox" } %>
  <%= render(UI::Text.new(size: :"4xl")) { "4XL — The quick brown fox" } %>
</div>
```

### Example: Weights

```erb
<div class="space-y-4">
  <%= render(UI::Text.new(weight: :normal)) { "Normal weight — The quick brown fox" } %>
  <%= render(UI::Text.new(weight: :medium)) { "Medium weight — The quick brown fox" } %>
  <%= render(UI::Text.new(weight: :semibold)) { "Semibold weight — The quick brown fox" } %>
  <%= render(UI::Text.new(weight: :bold)) { "Bold weight — The quick brown fox" } %>
</div>
```

### Example: Tones

```erb
<div class="space-y-4">
  <%= render(UI::Text.new(tone: :default)) { "Default tone — The quick brown fox" } %>
  <%= render(UI::Text.new(tone: :muted)) { "Muted tone — The quick brown fox" } %>
  <%= render(UI::Text.new(tone: :destructive)) { "Destructive tone — The quick brown fox" } %>
</div>
```