Tile

For elaborate examples, see the blocks page.

Tile 1

Description for tile 1

Tile 3

Description for tile 3

---
import {
  Tile,
  TileContent,
  TileDescription,
  TileTitle,
} from "@/components/ui/tile"
---

<div class="grid w-full gap-8">
  <Tile href="#">
    <TileContent>
      <TileTitle>Tile 1</TileTitle>
      <TileDescription>Description for tile 1</TileDescription>
    </TileContent>
  </Tile>
  <Tile href="#" variant="floating">
    <TileContent>
      <TileTitle>Tile 3</TileTitle>
      <TileDescription>Description for tile 3</TileDescription>
    </TileContent>
  </Tile>
</div>

Installation

To install the tile component, run the following command:

npx shadcn@latest add @fulldev/tile

Usage

For elaborate examples, see the blocks page.

import {
  Tile,
  TileActions,
  TileContent,
  TileDescription,
  TileMedia,
  TileSplit,
  TileSpread,
  TileTitle,
} from "@/components/ui/tile"

<Tile href="/">
  <TileContent>
    <TileTitle>Title</TileTitle>
    <TileDescription>Description</TileDescription>
  </TileContent>
</Tile>

Examples

With Media

Product Name

Beautiful product with amazing features

---
import image from "@/assets/image-placeholder.webp"

import { Icon } from "@/components/ui/icon"
import { Image } from "@/components/ui/image"
import {
  Tile,
  TileContent,
  TileDescription,
  TileMedia,
  TileSpread,
  TileTitle,
} from "@/components/ui/tile"
---

<Tile href="#" variant="floating">
  <TileMedia class="-mx-6 -mt-6 aspect-4/3">
    <Image class="size-full! object-cover" src={image} alt="Sample" />
  </TileMedia>
  <TileSpread>
    <TileContent>
      <TileTitle>Product Name</TileTitle>
      <TileDescription>Beautiful product with amazing features</TileDescription>
    </TileContent>
    <Icon name="arrow-right" class="size-5 shrink-0" />
  </TileSpread>
</Tile>

With Tagline

Featured

Premium Feature

Get access to exclusive features and updates

---
import { Icon } from "@/components/ui/icon"
import {
  Tile,
  TileContent,
  TileDescription,
  TileSpread,
  TileTitle,
} from "@/components/ui/tile"
---

<Tile href="#" variant="floating">
  <TileSpread>
    <TileContent>
      <TileDescription class="text-primary text-xs font-medium">
        Featured
      </TileDescription>
      <TileTitle>Premium Feature</TileTitle>
      <TileDescription
        >Get access to exclusive features and updates</TileDescription
      >
    </TileContent>
    <Icon name="arrow-right" class="size-5 shrink-0" />
  </TileSpread>
</Tile>

Split Layout

Side-by-Side Layout

Image on the left, content on the right

Learn More

---
import image from "@/assets/image-placeholder.webp"

import { Button } from "@/components/ui/button"
import { Image } from "@/components/ui/image"
import {
  Tile,
  TileActions,
  TileContent,
  TileDescription,
  TileMedia,
  TileSplit,
  TileTitle,
} from "@/components/ui/tile"
---

<Tile href="#">
  <TileSplit class="items-center">
    <TileMedia>
      <Image src={image} alt="Sample" class="rounded-md" />
    </TileMedia>
    <TileContent>
      <TileTitle>Side-by-Side Layout</TileTitle>
      <TileDescription>Image on the left, content on the right</TileDescription>
      <TileActions class="mt-4">
        <Button variant="outline" size="sm">Learn More</Button>
      </TileActions>
    </TileContent>
  </TileSplit>
</Tile>

Text Only

Simple Tile

A basic text-only tile

Floating Variant

With subtle elevation and shadow effects

---
import {
  Tile,
  TileContent,
  TileDescription,
  TileTitle,
} from "@/components/ui/tile"
---

<div class="grid w-full gap-4">
  <Tile href="#">
    <TileContent>
      <TileTitle>Simple Tile</TileTitle>
      <TileDescription>A basic text-only tile</TileDescription>
    </TileContent>
  </Tile>
  <Tile href="#" variant="floating">
    <TileContent>
      <TileTitle>Floating Variant</TileTitle>
      <TileDescription>With subtle elevation and shadow effects</TileDescription
      >
    </TileContent>
  </Tile>
</div>