GitHub Stars

Tile

A minimal surface primitive for flexible grid cells and link tiles.

Card

Use cards when content needs header, body, and footer structure.

Browse

Item

Use items for compact rows, media objects, and list entries.

Browse

Tile

Use tiles for simple grid surfaces where the content shape stays yours.

The Tile component is a low-opinion surface primitive. It gives you a consistent card-like container without prescribing header, title, footer, media, or action slots.

Installation

npx shadcn@latest add @fulldev/tile

Usage

import { Tile, TileContent, TileGroup } from "@/components/ui/tile"
<TileGroup>
  <Tile href="/components/" variant="outline">
    <TileContent>
      <h3>Components</h3>
      <p>Browse installable UI primitives.</p>
    </TileContent>
  </Tile>
</TileGroup>

Composition

Use the following composition to build a Tile:

TileGroup
└── Tile
    └── TileContent

Tile vs Card

Use Tile when you need a simple surface for a grid cell, link target, metric, or custom layout and you want the content structure to stay open.

Use Card when the surface needs a named structure such as header, content, footer, description, and action regions.

Variant

Use the variant prop on Tile to change the visual style of the surface. Available variants match the item component: default, inset, outline, and muted.

Default

Ghost surface with no visible border.

Outline

Transparent surface with a visible border.

Inset

Ghost surface with negative horizontal margins for edge alignment.

Muted

Muted background for secondary surfaces.

Size

Use the size prop on TileGroup to control tile density and intended desktop column count. Available sizes are sm, default, and lg.

  • sm uses smaller tiles, up to 5 desktop columns.
  • default uses regular tiles, up to 4 desktop columns.
  • lg uses larger tiles, up to 3 desktop columns.

The same sizes apply to both default and masonry. The default group variant uses CSS grid with repeat(auto-fit, minmax(...)). The masonry variant uses native CSS columns with matching column-width and column-count presets.

One

Use `size` when the group should own the column count.

Two

Use `size` when the group should own the column count.

Three

Use `size` when the group should own the column count.

Four

Use `size` when the group should own the column count.

Five

Use `size` when the group should own the column count.

Examples

Static

Use static tiles for simple grouped information, feature summaries, or settings panels.

Ready to publish

All required metadata and registry files are present.

Fast iteration

Compose the tile body with regular HTML and project components.

Portable source

Keep project-specific data outside the installable component.

Passing href turns Tile into an anchor and enables the default hover state.

Components

Browse installable primitives for Astro projects.

View components

Blocks

Browse complete sections for marketing and content pages.

View blocks

Masonry

Use variant="masonry" when a tile group contains uneven content heights.

Short note

A compact update.

Release notes

Use masonry when a grid contains uneven descriptions, nested content, media, or other blocks with natural height differences. The group keeps each tile intact while the browser flows them through columns.

This tile is taller because it has more content, not because the example forces a fixed height.

Checklist

Tiles avoid breaking across columns, so each piece of content remains readable.

Implementation detail

The same `Tile` and `TileContent` composition works in both layout variants, so you can switch the group without changing each tile.

  • Default uses responsive grid columns.
  • Masonry uses native CSS columns.
  • Each tile keeps its natural height.

Small aside

Good for notes, changelogs, resources, and mixed cards.

Resource

Add custom metadata, links, status badges, or richer nested markup when one tile needs more structure than the others.

View tile docs

Metrics

Use TileContent directly for dashboard-style metrics and compact summaries.

Components

48

Installable UI primitives

Blocks

86

Composable page sections

Registry

1

Shadcn-compatible source

Custom Layout

TileGroup provides responsive auto-fit column presets, and you can still add classes for featured layouts.

Feature tile

Span rows or columns when one tile needs more visual weight.

Source-first

Use regular markup inside the tile.

Theme-aware

Inherits card and foreground tokens.

Media

Put images, video, or custom visual treatments directly inside Tile. Use TileContent only around the padded content area you want it to own.

Abstract placeholder

Media tile

Add media before the content when the tile needs a visual lead.

Custom content

No extra slots

Add your own actions, metadata, badges, or nested layouts when needed.

API Reference

Tile

Tile renders a div by default and an a when href is passed.

  • variant: default, inset, outline, or muted.
  • href: optional URL that turns the root element into an anchor.
  • Accepts standard div and a attributes.

TileGroup

TileGroup arranges tiles in a responsive group.

  • variant: default or masonry.
  • size: sm, default, or lg.
  • Accepts standard div attributes.

TileContent

TileContent provides the padded content area inside a tile and accepts standard div attributes.

See the GitHub source code for more information on props.

Notes

  • Use Tile for simple grid surfaces and link tiles.
  • Passing href turns the root Tile into an anchor.
  • Use Tile variants for surface emphasis before adding custom background or border classes.
  • Use variant="inset" when a ghost tile should visually align with surrounding content while keeping its hover and focus padding.
  • Use TileGroup variants and sizes before writing custom grid or column classes.
  • Use Card when a surface needs named header, content, footer, or action regions.
  • Use Item for compact rows, list entries, and media objects.