Components

These components demonstrate how to build scalable semantic UI with TailUI.

Dashboard Use Case

Complex real-world example: SaaS dashboard card with nested components.

Preview

Analytics

Total users

12,458+12%

Code

1<section class="ui-card ui-elevated ui-hoverable">
2  <header class="ui-header ui-sticky">
3    <h3>Analytics</h3>
4    <button class="ui-button ui-ghost ui-sm">...</button>
5  </header>
6  <div class="ui-body">
7    <p>Total users</p>
8    <strong>12,458</strong>
9    <span class="ui-badge ui-success ui-dot">+12%</span>
10  </div>
11  <footer class="ui-footer">
12    <button class="ui-button ui-secondary ui-sm">Export</button>
13    <button class="ui-button ui-primary ui-sm">View Details</button>
14  </footer>
15</section>