diff --git a/components/tiles.mdx b/components/tiles.mdx
new file mode 100644
index 000000000..f4ff3db51
--- /dev/null
+++ b/components/tiles.mdx
@@ -0,0 +1,73 @@
+---
+title: "Tiles"
+description: "Display visual previews with titles and descriptions in a grid layout."
+keywords: ["tiles", "visual preview", "grid", "showcase"]
+---
+
+Use tiles to create visual showcase elements with a patterned background, title, and description. Tiles are ideal for displaying component previews, feature highlights, or navigation items in a grid layout.
+
+
+ 
+ 
+
+
+```mdx Tile example
+
+
+
+
+```
+
+## Grid layout
+
+Combine tiles with the [columns component](/components/columns) to create a responsive grid of visual previews.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```mdx Grid layout example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Properties
+
+
+ URL to navigate to when the tile is clicked.
+
+
+
+ The title displayed below the tile preview.
+
+
+
+ A short description displayed below the title.
+
+
+
+ Content displayed inside the tile preview area, typically images or SVGs.
+
diff --git a/docs.json b/docs.json
index e368f6a4f..a1002947f 100644
--- a/docs.json
+++ b/docs.json
@@ -94,6 +94,7 @@
"components/responses",
"components/steps",
"components/tabs",
+ "components/tiles",
"components/tooltips",
"components/update",
"components/view"
diff --git a/images/tiles/accordion-dark.svg b/images/tiles/accordion-dark.svg
new file mode 100644
index 000000000..dbcdf5af5
--- /dev/null
+++ b/images/tiles/accordion-dark.svg
@@ -0,0 +1,24 @@
+
diff --git a/images/tiles/accordion-light.svg b/images/tiles/accordion-light.svg
new file mode 100644
index 000000000..fa608eeb9
--- /dev/null
+++ b/images/tiles/accordion-light.svg
@@ -0,0 +1,24 @@
+