Nativ ui
Documentation

Stats

Statistics and metrics section patterns.

Basic Stats

<section class="py-16 border-y">
  <div class="container">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
      <div>
        <div class="text-4xl font-bold">10K+</div>
        <div class="mt-2 text-sm text-muted-foreground">Users</div>
      </div>
      <div>
        <div class="text-4xl font-bold">99.9%</div>
        <div class="mt-2 text-sm text-muted-foreground">Uptime</div>
      </div>
      <div>
        <div class="text-4xl font-bold">50M+</div>
        <div class="mt-2 text-sm text-muted-foreground">Requests/day</div>
      </div>
      <div>
        <div class="text-4xl font-bold">4.9</div>
        <div class="mt-2 text-sm text-muted-foreground">Rating</div>
      </div>
    </div>
  </div>
</section>

Best Practices

  1. Real numbers - Use actual metrics, not made up
  2. Round appropriately - "10K+" is better than "10,247"
  3. Add context - Label what each number means
  4. Limit to 3-4 - Too many dilutes impact
  5. Update regularly - Keep stats current