Add documentation for Tile component

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.
+
+<Tile href="/components/accordions" title="Accordion" description="2 variants">
+  <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
+  <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+</Tile>
+
+```mdx Tile example
+<Tile href="/components/accordions" title="Accordion" description="2 variants">
+  <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
+  <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+</Tile>
+```
+
+## Grid layout
+
+Combine tiles with the [Columns component](/components/columns) to create a responsive grid of visual previews.
+
+<Columns cols={3}>
+  <Tile href="/components/accordions" title="Accordion" description="2 variants">
+    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+  </Tile>
+  <Tile href="/components/accordions" title="Accordion" description="2 variants">
+    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+  </Tile>
+  <Tile href="/components/accordions" title="Accordion" description="2 variants">
+    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+  </Tile>
+</Columns>
+
+```mdx Grid layout example
+<Columns cols={3}>
+  <Tile href="/components/accordions" title="Accordion" description="2 variants">
+    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+  </Tile>
+  <Tile href="/components/accordions" title="Accordion" description="2 variants">
+    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+  </Tile>
+  <Tile href="/components/accordions" title="Accordion" description="2 variants">
+    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+  </Tile>
+</Columns>
+```
+
+## Properties
+
+<ResponseField name="href" type="string" required>
+  URL to navigate to when the tile is clicked.
+</ResponseField>
+
+<ResponseField name="title" type="string">
+  The title displayed below the tile preview.
+</ResponseField>
+
+<ResponseField name="description" type="string">
+  A short description displayed below the title.
+</ResponseField>
+
+<ResponseField name="children" type="React.ReactNode" required>
+  Content displayed inside the tile preview area, typically images or SVGs.
+</ResponseField>

docs.json

@@ -94,6 +94,7 @@
                       "components/responses",
                       "components/steps",
                       "components/tabs",
+                      "components/tiles",
                       "components/tooltips",
                       "components/update",
                       "components/view"