Nativ ui
Documentation

Features

Feature section layouts and patterns.

Grid Layout

<section class="py-24">
  <div class="container">
    <div class="text-center mb-16">
      <h2 class="text-3xl font-bold">Features</h2>
      <p class="mt-4 text-muted-foreground">
        Everything you need to build modern applications.
      </p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Feature card -->
      <div class="p-6 rounded-lg border">
        <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
          <!-- Icon -->
        </div>
        <h3 class="mt-4 font-semibold">Feature Title</h3>
        <p class="mt-2 text-sm text-muted-foreground">
          Brief description of the feature and its benefits.
        </p>
      </div>
    </div>
  </div>
</section>

Patterns

Bento Grid

Asymmetric grid with varying card sizes.

Alternating

Feature + image alternating left/right.

Icon Grid

Simple icons with titles and descriptions.

Best Practices

  1. Lead with benefits - What users gain, not what you do
  2. Concise copy - 1-2 sentences per feature
  3. Visual icons - Help users scan quickly
  4. Group related - Organize features logically
  5. Limit count - 3-6 features is ideal