Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Tiles

Tiles are an opinionated version of cards that can be used to display statistics and other prominent information in your application. They consist of two tags: <ui:tiles> (the container which controls the layout) and <ui:tile> (each individual tile).

Using Tiles

To use tiles, use the <ui:tiles> tag with the <ui:tile> tag inside of it.

Here's an example:

Example Tiles
Copied!
Test Status
Passed
Score
88%
Tasks Completed
37 / 42 
 1<ui:tiles>
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>
 1<ui:tiles>
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>

Properties

The <ui:tiles> tag accepts the following properties:

Property Type Default Description
gap string sm The gap between tiles. Either sm (default), md, or lg.
variant string outline The variant of the tiles, either outline (default), solid, or ghost.

Variants

Tiles come in three variants: outline (default), solid, and ghost.

Outline

Tile Outline Variant
Copied!
Test Status
Passed
Score
88%
Tasks Completed
37 / 42 
 1<ui:tiles variant="outline">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>
 1<ui:tiles variant="outline">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>

Solid

Tile Solid Variant
Copied!
Test Status
Passed
Score
88%
Tasks Completed
37 / 42 
 1<ui:tiles variant="solid">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>
 1<ui:tiles variant="solid">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>

Ghost

Tile Ghost Variant
Copied!
Test Status
Passed
Score
88%
Tasks Completed
37 / 42 
 1<ui:tiles variant="ghost">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>
 1<ui:tiles variant="ghost">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>

Gap

The gap property controls the gap between tiles. It can be either sm (default), md, or lg.

Small

Tile Gap Property
Copied!
Test Status
Passed
Score
88%
Tasks Completed
37 / 42 
 1<ui:tiles gap="sm">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>
 1<ui:tiles gap="sm">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>

Medium

Tile Gap Property
Copied!
Test Status
Passed
Score
88%
Tasks Completed
37 / 42 
 1<ui:tiles gap="md">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>
 1<ui:tiles gap="md">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>

Large

Tile Gap Property
Copied!
Test Status
Passed
Score
88%
Tasks Completed
37 / 42 
 1<ui:tiles gap="lg">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>
 1<ui:tiles gap="lg">
 2    <ui:tile>
 3        <x-slot:label>Test Status</x-slot:label>
 4        <span class="text-success-600 dark:text-success-400">Passed</span>
 5    </ui:tile>
 6 
 7    <ui:tile>
 8        <x-slot:label>Score</x-slot:label>
 9        88%
10    </ui:tile>
11 
12    <ui:tile>
13        <x-slot:label>Tasks Completed</x-slot:label>
14        <span>
15            37
16            <span class="opacity-60 text-lg font-medium">/ 42</span>
17        </span>
18    </ui:tile>
19</ui:tiles>

Slots

The individual <ui:tile> components support the following slots:

Label

The label slot is used to display the label for the tile. It's the small text that appears above the main content of the tile.

Label Slot
Copied!
I'm a label, check me out!
Tiles are great!
1<ui:tile>
2    <x-slot:label>I'm a label, check me out!</x-slot:label>
3    Tiles are great!
4</ui:tile>
1<ui:tile>
2    <x-slot:label>I'm a label, check me out!</x-slot:label>
3    Tiles are great!
4</ui:tile>

Description

The description slot is used to display an optional the description for the tile. Descriptions appear at the top right of the tile. This is often a good spot for badges or other small bits of information.

Description Slot
Copied!
I'm a label, check me out!
Description 🤫
Tiles are great!
1<ui:tile>
2    <x-slot:label>I'm a label, check me out!</x-slot:label>
3    <x-slot:description>Description 🤫</x-slot:description>
4    Tiles are great!
5</ui:tile>
1<ui:tile>
2    <x-slot:label>I'm a label, check me out!</x-slot:label>
3    <x-slot:description>Description 🤫</x-slot:description>
4    Tiles are great!
5</ui:tile>
Like this project? Stop by the bear cave to stargaze.