diff --git a/.gitignore b/.gitignore
index 3008684..661e5ee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ dist
 out
 build
 *.tsbuildinfo
+vite.config.ts.timestamp-*
 storybook-static
 reports
 .next
diff --git a/apps/docs/.storybook/preview.ts b/apps/docs/.storybook/preview.ts
index 42b561a..2160782 100644
--- a/apps/docs/.storybook/preview.ts
+++ b/apps/docs/.storybook/preview.ts
@@ -11,6 +11,7 @@ const preview: Preview = {
           "Typography",
           "Navigation",
           "Form",
+          "Layout",
         ],
       },
     },
diff --git a/apps/docs/stories/Layout/Stack.stories.tsx b/apps/docs/stories/Layout/Stack.stories.tsx
new file mode 100644
index 0000000..3b8797c
--- /dev/null
+++ b/apps/docs/stories/Layout/Stack.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack } from "@themeless-ui/react";
+
+const meta = {
+  title: "Layout/Stack",
+  component: Stack,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const children = [
+  <div key="1">1</div>,
+  <div key="2">2</div>,
+  <div key="3">3</div>,
+];
+
+export const Vertical: Story = {
+  args: {
+    direction: "vertical",
+    children,
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    direction: "horizontal",
+    children,
+  },
+};
diff --git a/apps/nextjs-example/app/about/page.tsx b/apps/nextjs-example/app/about/page.tsx
index edd2a9e..6c6d818 100644
--- a/apps/nextjs-example/app/about/page.tsx
+++ b/apps/nextjs-example/app/about/page.tsx
@@ -1,17 +1,20 @@
-import { Heading, Paragraph } from "@themeless-ui/react";
+import { Heading, Paragraph, Stack } from "@themeless-ui/react";
 
 export default async function About() {
   return (
     <article>
-      <Heading level={1}>About</Heading>
-      <Paragraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar
-        quam ipsum, at placerat quam eleifend in. Nulla gravida eros eu vehicula
-        laoreet. Duis vitae consequat ante. Vestibulum quis semper neque.
-        Pellentesque et ante ut nisi posuere dictum. Aenean dictum ligula id
-        velit cursus, in tincidunt felis faucibus. Class aptent taciti sociosqu
-        ad litora torquent per conubia nostra, per inceptos himenaeos.
-      </Paragraph>
+      <Stack>
+        <Heading level={1}>About</Heading>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar
+          quam ipsum, at placerat quam eleifend in. Nulla gravida eros eu
+          vehicula laoreet. Duis vitae consequat ante. Vestibulum quis semper
+          neque. Pellentesque et ante ut nisi posuere dictum. Aenean dictum
+          ligula id velit cursus, in tincidunt felis faucibus. Class aptent
+          taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+          himenaeos.
+        </Paragraph>
+      </Stack>
     </article>
   );
 }
diff --git a/apps/nextjs-example/app/layout.tsx b/apps/nextjs-example/app/layout.tsx
index 60edd78..0ea102d 100644
--- a/apps/nextjs-example/app/layout.tsx
+++ b/apps/nextjs-example/app/layout.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Heading, Text } from "@themeless-ui/react";
+import { Anchor, Heading, Stack, Text } from "@themeless-ui/react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import "./index.css";
@@ -21,36 +21,44 @@ export default function RootLayout({
             <header>
               <Heading level={2}>ThemelessUI Next.js Example App</Heading>
               <nav>
-                <Text>
-                  <Link href="/" passHref legacyBehavior>
-                    <Anchor>Home</Anchor>
-                  </Link>
-                  {" | "}
-                  <Link href="/about" passHref legacyBehavior>
-                    <Anchor>About</Anchor>
-                  </Link>
-                </Text>
+                <Stack direction="horizontal">
+                  <Text>
+                    <Link href="/" passHref legacyBehavior>
+                      <Anchor>Home</Anchor>
+                    </Link>
+                  </Text>
+                  <Text>&nbsp;|&nbsp;</Text>
+                  <Text>
+                    <Link href="/about" passHref legacyBehavior>
+                      <Anchor>About</Anchor>
+                    </Link>
+                  </Text>
+                </Stack>
               </nav>
             </header>
             <main>{children}</main>
             <footer>
-              <Text type="small">
-                <Link
-                  href="https://github.com/jtiala/themeless-ui"
-                  passHref
-                  legacyBehavior
-                >
-                  <Anchor target="_blank">GitHub</Anchor>
-                </Link>
-                {" | "}
-                <Link
-                  href="https://jtiala.github.io/themeless-ui"
-                  passHref
-                  legacyBehavior
-                >
-                  <Anchor target="_blank">Storybook</Anchor>
-                </Link>
-              </Text>
+              <Stack direction="horizontal">
+                <Text type="small">
+                  <Link
+                    href="https://github.com/jtiala/themeless-ui"
+                    passHref
+                    legacyBehavior
+                  >
+                    <Anchor target="_blank">GitHub</Anchor>
+                  </Link>
+                </Text>
+                <Text type="small">&nbsp;|&nbsp;</Text>
+                <Text type="small">
+                  <Link
+                    href="https://jtiala.github.io/themeless-ui"
+                    passHref
+                    legacyBehavior
+                  >
+                    <Anchor target="_blank">Storybook</Anchor>
+                  </Link>
+                </Text>
+              </Stack>
             </footer>
           </div>
         </div>
diff --git a/apps/nextjs-example/app/page.tsx b/apps/nextjs-example/app/page.tsx
index 7de9f5e..73efdf9 100644
--- a/apps/nextjs-example/app/page.tsx
+++ b/apps/nextjs-example/app/page.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Heading, List, Text } from "@themeless-ui/react";
+import { Anchor, Heading, List, Stack, Text } from "@themeless-ui/react";
 import { allPosts } from "contentlayer/generated";
 import { compareDesc } from "date-fns";
 import Link from "next/link";
@@ -10,19 +10,21 @@ export default async function Home() {
 
   return (
     <article>
-      <Heading level={1}>All posts</Heading>
-      {posts.length === 0 && <Text>No posts.</Text>}
-      {posts.length > 0 && (
-        <List>
-          {posts.map((post) => (
-            <List.Item key={post._id}>
-              <Link href={post.url} passHref legacyBehavior>
-                <Anchor>{post.title}</Anchor>
-              </Link>
-            </List.Item>
-          ))}
-        </List>
-      )}
+      <Stack>
+        <Heading level={1}>All posts</Heading>
+        {posts.length === 0 && <Text>No posts.</Text>}
+        {posts.length > 0 && (
+          <List>
+            {posts.map((post) => (
+              <List.Item key={post._id}>
+                <Link href={post.url} passHref legacyBehavior>
+                  <Anchor>{post.title}</Anchor>
+                </Link>
+              </List.Item>
+            ))}
+          </List>
+        )}
+      </Stack>
     </article>
   );
 }
diff --git a/apps/nextjs-example/app/posts/[slug]/page.tsx b/apps/nextjs-example/app/posts/[slug]/page.tsx
index adb60d2..d8ae8f4 100644
--- a/apps/nextjs-example/app/posts/[slug]/page.tsx
+++ b/apps/nextjs-example/app/posts/[slug]/page.tsx
@@ -1,5 +1,5 @@
 import { mdxComponents } from "@/utils/mdx";
-import { Heading } from "@themeless-ui/react";
+import { Heading, Stack } from "@themeless-ui/react";
 import { allPosts } from "contentlayer/generated";
 import { format, parseISO } from "date-fns";
 import { getMDXComponent } from "next-contentlayer/hooks";
@@ -29,12 +29,14 @@ export default async function Post({ params }: { params: { slug: string } }) {
 
   return (
     <article>
-      <Heading level={1}>{post.title}</Heading>
-      {/* TODO: Add `time` type to <Text> and use it here */}
-      <time dateTime={post.date}>
-        {format(parseISO(post.date), "LLLL d, yyyy")}
-      </time>
-      <Content components={mdxComponents} />
+      <Stack>
+        <Heading level={1}>{post.title}</Heading>
+        {/* TODO: Add `time` type to <Text> and use it here */}
+        <time dateTime={post.date}>
+          {format(parseISO(post.date), "LLLL d, yyyy")}
+        </time>
+        <Content components={mdxComponents} />
+      </Stack>
     </article>
   );
 }
diff --git a/apps/react-example/src/App.tsx b/apps/react-example/src/App.tsx
index c91e3aa..ab9771c 100644
--- a/apps/react-example/src/App.tsx
+++ b/apps/react-example/src/App.tsx
@@ -1,4 +1,4 @@
-import { Heading, Text } from "@themeless-ui/react";
+import { Anchor, Heading, Stack, Text } from "@themeless-ui/react";
 import { TypographyExample } from "./examples/Typography/TypographyExample";
 
 export function App() {
@@ -11,23 +11,27 @@ export function App() {
         <TypographyExample />
       </main>
       <footer>
-        <Text>
-          <a
-            href="https://github.com/jtiala/themeless-ui"
-            target="_blank"
-            rel="noreferrer"
-          >
-            GitHub
-          </a>
-          {" | "}
-          <a
-            href="https://jtiala.github.io/themeless-ui"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Storybook
-          </a>
-        </Text>
+        <Stack direction="horizontal">
+          <Stack direction="horizontal">
+            <Text type="small">
+              <Anchor
+                href="https://github.com/jtiala/themeless-ui"
+                target="_blank"
+              >
+                GitHub
+              </Anchor>
+            </Text>
+            <Text type="small">&nbsp;|&nbsp;</Text>
+            <Text type="small">
+              <Anchor
+                href="https://jtiala.github.io/themeless-ui"
+                target="_blank"
+              >
+                Storybook
+              </Anchor>
+            </Text>
+          </Stack>
+        </Stack>
       </footer>
     </div>
   );
diff --git a/apps/react-example/src/examples/Typography/TypographyExample.tsx b/apps/react-example/src/examples/Typography/TypographyExample.tsx
index 5858249..274f6b0 100644
--- a/apps/react-example/src/examples/Typography/TypographyExample.tsx
+++ b/apps/react-example/src/examples/Typography/TypographyExample.tsx
@@ -3,178 +3,185 @@ import {
   Heading,
   List,
   Paragraph,
+  Stack,
   Text,
 } from "@themeless-ui/react";
 
 export function TypographyExample() {
   return (
     <article data-testid="typographyExample">
-      <Heading level={1}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </Heading>
-      <Paragraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia
-        cursus ex, in lacinia est.{" "}
-        <Text type="strong">Vivamus rhoncus mollis</Text> felis nec efficitur.
-        Maecenas id malesuada quam. Suspendisse aliquam urna sed posuere
-        malesuada. Ut viverra ipsum eget ipsum eleifend dignissim. Nullam vitae
-        nunc quam. Ut aliquam pharetra nunc, eget posuere nisi viverra sed.
-        Vivamus nec nibh at est ultrices laoreet volutpat ut sapien. Sed
-        scelerisque augue nec ex interdum, in tincidunt nunc imperdiet. Sed
-        lacinia vulputate sem eu pharetra. Ut faucibus dui urna, ac maximus eros
-        finibus eget. Cras imperdiet odio non erat egestas sagittis. Donec eget
-        odio turpis. Curabitur dictum libero in velit ultrices sollicitudin.
-        Mauris semper vulputate consectetur.
-      </Paragraph>
-      <Paragraph>
-        Suspendisse accumsan rhoncus neque. Maecenas molestie sollicitudin
-        semper. Nullam pulvinar sollicitudin justo. Sed sollicitudin lorem at
-        est rutrum, a suscipit lorem venenatis.{" "}
-        <Text type="mark">
-          In volutpat, ex eget tempus auctor, lorem turpis finibus dui, et
-          ultrices urna orci eget lorem. Suspendisse mauris tellus, mattis id
-          feugiat vel, imperdiet quis massa. Integer non lacus est.
-        </Text>{" "}
-        Suspendisse nunc augue, tristique at enim vel, sollicitudin maximus
-        ante. Quisque rutrum tempor velit non varius. Suspendisse ornare mauris
-        at mi vulputate fringilla.
-      </Paragraph>
-      <Heading level={2}>Cras ut ipsum ut erat semper gravida</Heading>
-      <Paragraph>
-        Cras ut ipsum ut erat semper gravida. Nam suscipit varius tincidunt.
-        Vestibulum vulputate sed dolor nec laoreet. Cras enim nulla, bibendum eu
-        placerat non, consequat at erat. Nam eleifend maximus faucibus. Praesent
-        sagittis sem non urna consectetur, non fringilla mi posuere. Sed non mi
-        tortor. <Text type="em">Cras efficitur blandit rhoncus.</Text> Cras
-        ullamcorper non diam nec sagittis. Nunc eget lorem eu ex rutrum molestie
-        sed vitae augue. Maecenas in risus libero. Fusce sapien lacus, tristique
-        eget justo sed, auctor fringilla metus. Mauris augue nunc, lobortis in
-        lectus vel, faucibus posuere velit.
-      </Paragraph>
-      <Blockquote
-        cite="https://source-of-the-quote.example.com"
-        author="Samuel L. Ipsum"
-        source="Lorem Ipsum"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan
-        ex vel lacinia volutpat. Ut ultricies, mauris et varius finibus, nulla
-        ante efficitur libero, eget convallis odio ex ut neque. Praesent quis
-        odio ac felis pretium pharetra sit amet quis neque. Nam nec libero
-        purus. Maecenas sagittis lobortis lacinia. Aliquam non vehicula metus.
-        Vivamus fringilla ante eget leo pretium cursus. Morbi venenatis diam
-        metus, ut faucibus dolor mollis a. Nulla nec ex sapien. Curabitur a
-        tempor est. Mauris faucibus congue mi, sit amet pulvinar justo porttitor
-        nec. Nunc et eros a est fermentum lacinia id at nisi.
-      </Blockquote>
-      <Paragraph>
-        Etiam porta purus a aliquam rutrum. Vivamus finibus sed metus et
-        vestibulum. Ut ornare eget mi nec congue. Nunc et dui sed diam viverra
-        porta. Phasellus gravida massa lorem, et ultrices tellus scelerisque
-        eget. Cras congue congue pulvinar. Aliquam aliquet dolor est, eget
-        lobortis tortor efficitur ut. Nam accumsan, nisl quis pretium imperdiet,
-        leo nulla efficitur lectus, eget vestibulum diam lorem id ante. Cras sit
-        amet cursus purus, eget bibendum arcu.
-      </Paragraph>
-      <Heading level={2}>Cras sit amet cursus purus</Heading>
-      <Heading level={3}>Sed sodales eros</Heading>
-      <Paragraph>
-        Sed sodales eros ut arcu tincidunt, et condimentum lacus ultricies.
-        Quisque rhoncus, nulla et vulputate vestibulum, ligula dolor tristique
-        massa, sollicitudin fermentum eros magna nec est. Nulla facilisi.
-        Quisque efficitur turpis sit amet ornare euismod. Pellentesque in neque
-        vitae risus posuere condimentum at in ex. Morbi consequat erat at risus
-        laoreet rhoncus. Suspendisse pharetra bibendum ante eu gravida.
-        Pellentesque interdum eget tortor sed venenatis. Suspendisse mollis
-        turpis non justo sollicitudin convallis. Ut quis eros lacus. Cras
-        aliquam non ex ultrices sollicitudin. Suspendisse efficitur id lorem ut
-        gravida. Morbi laoreet nec magna molestie eleifend. Proin ligula risus,
-        tristique et nunc et, sagittis aliquet lacus. Duis sollicitudin elit
-        vitae nisl rhoncus pretium. Donec at auctor neque.
-      </Paragraph>
-      <Paragraph>
-        Nunc imperdiet, dui et molestie congue, odio velit imperdiet lacus, at
-        aliquet nulla urna sit amet orci. Praesent sed dolor luctus, ornare
-        metus id, iaculis ante. Integer non suscipit nunc, eu cursus risus.
-        Nulla vel iaculis est, et viverra metus. Mauris venenatis sodales lacus
-        ultricies scelerisque. Praesent lobortis felis purus, non vulputate leo
-        sollicitudin vitae. In a felis non nunc congue volutpat ut sed orci.
-        Duis volutpat tristique neque ac sodales. Duis faucibus maximus lectus,
-        a aliquam nisi pharetra nec. Sed risus tortor, sollicitudin sed
-        malesuada a, imperdiet vitae nisi. Curabitur ut hendrerit ex.
-        Pellentesque habitant morbi tristique senectus et netus et malesuada
-        fames ac turpis egestas. Nam tellus nisi, tincidunt vitae justo ac,
-        scelerisque feugiat dolor. Proin vitae erat pretium, luctus lorem eu,
-        imperdiet augue.
-      </Paragraph>
-      <Heading level={4}>Vivamus lacinia semper dolor</Heading>
-      <Paragraph>
-        Vivamus lacinia semper dolor, et vehicula velit condimentum sed. Proin
-        consequat tellus ac arcu tincidunt aliquet. Ut bibendum sodales justo,
-        in malesuada nulla semper non. Morbi lectus diam, tincidunt varius magna
-        id, congue semper ipsum. Vestibulum nisi eros, aliquet mollis
-        scelerisque ac, aliquam non magna. Suspendisse nec mi cursus, fermentum
-        velit nec, sollicitudin enim. Maecenas elementum in velit vitae viverra.
-        Etiam ut consequat lorem, eget posuere dui. Sed enim massa, ornare ac
-        ipsum venenatis, convallis luctus arcu. Ut vel consectetur arcu.
-      </Paragraph>
-      <List>
-        <List.Item>Lorem ipsum</List.Item>
-        <List.Item>Dolor sit amet</List.Item>
-        <List.Item>Consectetur adipiscing elit</List.Item>
-      </List>
-      <Paragraph>
-        Suspendisse convallis mi sed metus consectetur euismod. Proin vel libero
-        nisi. Curabitur nec nunc eget mauris tempus consectetur. Sed et elit at
-        enim luctus imperdiet sollicitudin eu diam. Proin vitae nisi ornare,
-        ullamcorper felis sit amet, placerat leo. Integer sapien mauris, cursus
-        fringilla erat quis, commodo pharetra nulla. Vivamus sit amet hendrerit
-        dui, eu egestas dolor. Donec interdum convallis velit ut pellentesque.
-        Quisque eu ultrices nisi. Integer eleifend ante ut scelerisque porta.
-        Aenean accumsan eget velit vestibulum iaculis. Praesent elementum
-        fermentum massa vitae sollicitudin. Sed eget maximus leo, ac aliquam
-        quam.
-      </Paragraph>
-      <Heading level={5}>Integer maximus sapien</Heading>
-      <Paragraph>
-        Integer maximus sapien a libero venenatis, id vulputate leo molestie.
-        Suspendisse pellentesque, turpis vel vehicula varius, quam purus dapibus
-        orci, at molestie tortor massa ut purus. Maecenas sit amet vulputate ex.
-        Suspendisse nec nibh vitae erat rhoncus semper feugiat et diam.
-        Suspendisse potenti. Cras neque tortor, consequat eu enim in, suscipit
-        dapibus quam. Quisque eget pulvinar dolor. Etiam porta tincidunt velit,
-        in laoreet elit tincidunt a. Nulla volutpat eleifend dictum.
-      </Paragraph>
-      <Paragraph>
-        Nulla scelerisque nulla leo, et lacinia est feugiat eu. Morbi dignissim
-        nulla lectus, in fermentum felis ullamcorper nec. Proin at ligula eros.
-        Ut non erat gravida orci tempus fringilla vitae nec nisl. In varius, dui
-        scelerisque blandit malesuada, erat ante placerat ipsum, eget malesuada
-        neque leo vitae tortor. Praesent eleifend felis velit, id egestas lorem
-        blandit id. Nulla pulvinar nisi malesuada mauris tempus, ac lobortis
-        dolor sagittis.
-      </Paragraph>
-      <Heading level={6}>Cras fermentum porta</Heading>
-      <Paragraph>
-        Cras fermentum porta enim, at pellentesque diam egestas sit amet. Sed
-        sed auctor odio. Donec turpis purus, aliquam non nisi quis, mollis
-        tempor metus. Phasellus cursus nulla et ipsum vehicula, fringilla
-        aliquam nisi venenatis. Donec consequat venenatis nisl at egestas. Proin
-        scelerisque sagittis turpis. Curabitur gravida, purus non congue
-        condimentum, urna mauris fringilla ante, sed finibus ante tellus vitae
-        lectus. Pellentesque in imperdiet ligula.
-      </Paragraph>
-      <Paragraph>
-        Etiam rutrum mi sit amet pulvinar suscipit. Praesent quis enim ac orci
-        elementum tempor congue sodales erat. Suspendisse potenti. Proin et
-        feugiat quam. Mauris vel laoreet lectus, sit amet bibendum dolor. Fusce
-        ut odio semper, tincidunt tortor et, imperdiet velit. Donec lacinia diam
-        a enim porttitor, sit amet blandit nisl congue. Praesent cursus lorem
-        eget vehicula auctor. Praesent tincidunt interdum elementum. Vestibulum
-        vel accumsan lacus. Integer eget volutpat nibh, nec ornare nulla. Duis
-        id velit pulvinar, finibus nunc eget, ullamcorper libero. Vivamus leo
-        ex, interdum in auctor non, tempor vehicula dui. Vestibulum sed
-        efficitur eros. Donec lacinia ultrices eros vel mattis.
-      </Paragraph>
+      <Stack>
+        <Heading level={1}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </Heading>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+          lacinia cursus ex, in lacinia est.{" "}
+          <Text type="strong">Vivamus rhoncus mollis</Text> felis nec efficitur.
+          Maecenas id malesuada quam. Suspendisse aliquam urna sed posuere
+          malesuada. Ut viverra ipsum eget ipsum eleifend dignissim. Nullam
+          vitae nunc quam. Ut aliquam pharetra nunc, eget posuere nisi viverra
+          sed. Vivamus nec nibh at est ultrices laoreet volutpat ut sapien. Sed
+          scelerisque augue nec ex interdum, in tincidunt nunc imperdiet. Sed
+          lacinia vulputate sem eu pharetra. Ut faucibus dui urna, ac maximus
+          eros finibus eget. Cras imperdiet odio non erat egestas sagittis.
+          Donec eget odio turpis. Curabitur dictum libero in velit ultrices
+          sollicitudin. Mauris semper vulputate consectetur.
+        </Paragraph>
+        <Paragraph>
+          Suspendisse accumsan rhoncus neque. Maecenas molestie sollicitudin
+          semper. Nullam pulvinar sollicitudin justo. Sed sollicitudin lorem at
+          est rutrum, a suscipit lorem venenatis.{" "}
+          <Text type="mark">
+            In volutpat, ex eget tempus auctor, lorem turpis finibus dui, et
+            ultrices urna orci eget lorem. Suspendisse mauris tellus, mattis id
+            feugiat vel, imperdiet quis massa. Integer non lacus est.
+          </Text>{" "}
+          Suspendisse nunc augue, tristique at enim vel, sollicitudin maximus
+          ante. Quisque rutrum tempor velit non varius. Suspendisse ornare
+          mauris at mi vulputate fringilla.
+        </Paragraph>
+        <Heading level={2}>Cras ut ipsum ut erat semper gravida</Heading>
+        <Paragraph>
+          Cras ut ipsum ut erat semper gravida. Nam suscipit varius tincidunt.
+          Vestibulum vulputate sed dolor nec laoreet. Cras enim nulla, bibendum
+          eu placerat non, consequat at erat. Nam eleifend maximus faucibus.
+          Praesent sagittis sem non urna consectetur, non fringilla mi posuere.
+          Sed non mi tortor.{" "}
+          <Text type="em">Cras efficitur blandit rhoncus.</Text> Cras
+          ullamcorper non diam nec sagittis. Nunc eget lorem eu ex rutrum
+          molestie sed vitae augue. Maecenas in risus libero. Fusce sapien
+          lacus, tristique eget justo sed, auctor fringilla metus. Mauris augue
+          nunc, lobortis in lectus vel, faucibus posuere velit.
+        </Paragraph>
+        <Blockquote
+          cite="https://source-of-the-quote.example.com"
+          author="Samuel L. Ipsum"
+          source="Lorem Ipsum"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+          accumsan ex vel lacinia volutpat. Ut ultricies, mauris et varius
+          finibus, nulla ante efficitur libero, eget convallis odio ex ut neque.
+          Praesent quis odio ac felis pretium pharetra sit amet quis neque. Nam
+          nec libero purus. Maecenas sagittis lobortis lacinia. Aliquam non
+          vehicula metus. Vivamus fringilla ante eget leo pretium cursus. Morbi
+          venenatis diam metus, ut faucibus dolor mollis a. Nulla nec ex sapien.
+          Curabitur a tempor est. Mauris faucibus congue mi, sit amet pulvinar
+          justo porttitor nec. Nunc et eros a est fermentum lacinia id at nisi.
+        </Blockquote>
+        <Paragraph>
+          Etiam porta purus a aliquam rutrum. Vivamus finibus sed metus et
+          vestibulum. Ut ornare eget mi nec congue. Nunc et dui sed diam viverra
+          porta. Phasellus gravida massa lorem, et ultrices tellus scelerisque
+          eget. Cras congue congue pulvinar. Aliquam aliquet dolor est, eget
+          lobortis tortor efficitur ut. Nam accumsan, nisl quis pretium
+          imperdiet, leo nulla efficitur lectus, eget vestibulum diam lorem id
+          ante. Cras sit amet cursus purus, eget bibendum arcu.
+        </Paragraph>
+        <Heading level={2}>Cras sit amet cursus purus</Heading>
+        <Heading level={3}>Sed sodales eros</Heading>
+        <Paragraph>
+          Sed sodales eros ut arcu tincidunt, et condimentum lacus ultricies.
+          Quisque rhoncus, nulla et vulputate vestibulum, ligula dolor tristique
+          massa, sollicitudin fermentum eros magna nec est. Nulla facilisi.
+          Quisque efficitur turpis sit amet ornare euismod. Pellentesque in
+          neque vitae risus posuere condimentum at in ex. Morbi consequat erat
+          at risus laoreet rhoncus. Suspendisse pharetra bibendum ante eu
+          gravida. Pellentesque interdum eget tortor sed venenatis. Suspendisse
+          mollis turpis non justo sollicitudin convallis. Ut quis eros lacus.
+          Cras aliquam non ex ultrices sollicitudin. Suspendisse efficitur id
+          lorem ut gravida. Morbi laoreet nec magna molestie eleifend. Proin
+          ligula risus, tristique et nunc et, sagittis aliquet lacus. Duis
+          sollicitudin elit vitae nisl rhoncus pretium. Donec at auctor neque.
+        </Paragraph>
+        <Paragraph>
+          Nunc imperdiet, dui et molestie congue, odio velit imperdiet lacus, at
+          aliquet nulla urna sit amet orci. Praesent sed dolor luctus, ornare
+          metus id, iaculis ante. Integer non suscipit nunc, eu cursus risus.
+          Nulla vel iaculis est, et viverra metus. Mauris venenatis sodales
+          lacus ultricies scelerisque. Praesent lobortis felis purus, non
+          vulputate leo sollicitudin vitae. In a felis non nunc congue volutpat
+          ut sed orci. Duis volutpat tristique neque ac sodales. Duis faucibus
+          maximus lectus, a aliquam nisi pharetra nec. Sed risus tortor,
+          sollicitudin sed malesuada a, imperdiet vitae nisi. Curabitur ut
+          hendrerit ex. Pellentesque habitant morbi tristique senectus et netus
+          et malesuada fames ac turpis egestas. Nam tellus nisi, tincidunt vitae
+          justo ac, scelerisque feugiat dolor. Proin vitae erat pretium, luctus
+          lorem eu, imperdiet augue.
+        </Paragraph>
+        <Heading level={4}>Vivamus lacinia semper dolor</Heading>
+        <Paragraph>
+          Vivamus lacinia semper dolor, et vehicula velit condimentum sed. Proin
+          consequat tellus ac arcu tincidunt aliquet. Ut bibendum sodales justo,
+          in malesuada nulla semper non. Morbi lectus diam, tincidunt varius
+          magna id, congue semper ipsum. Vestibulum nisi eros, aliquet mollis
+          scelerisque ac, aliquam non magna. Suspendisse nec mi cursus,
+          fermentum velit nec, sollicitudin enim. Maecenas elementum in velit
+          vitae viverra. Etiam ut consequat lorem, eget posuere dui. Sed enim
+          massa, ornare ac ipsum venenatis, convallis luctus arcu. Ut vel
+          consectetur arcu.
+        </Paragraph>
+        <List>
+          <List.Item>Lorem ipsum</List.Item>
+          <List.Item>Dolor sit amet</List.Item>
+          <List.Item>Consectetur adipiscing elit</List.Item>
+        </List>
+        <Paragraph>
+          Suspendisse convallis mi sed metus consectetur euismod. Proin vel
+          libero nisi. Curabitur nec nunc eget mauris tempus consectetur. Sed et
+          elit at enim luctus imperdiet sollicitudin eu diam. Proin vitae nisi
+          ornare, ullamcorper felis sit amet, placerat leo. Integer sapien
+          mauris, cursus fringilla erat quis, commodo pharetra nulla. Vivamus
+          sit amet hendrerit dui, eu egestas dolor. Donec interdum convallis
+          velit ut pellentesque. Quisque eu ultrices nisi. Integer eleifend ante
+          ut scelerisque porta. Aenean accumsan eget velit vestibulum iaculis.
+          Praesent elementum fermentum massa vitae sollicitudin. Sed eget
+          maximus leo, ac aliquam quam.
+        </Paragraph>
+        <Heading level={5}>Integer maximus sapien</Heading>
+        <Paragraph>
+          Integer maximus sapien a libero venenatis, id vulputate leo molestie.
+          Suspendisse pellentesque, turpis vel vehicula varius, quam purus
+          dapibus orci, at molestie tortor massa ut purus. Maecenas sit amet
+          vulputate ex. Suspendisse nec nibh vitae erat rhoncus semper feugiat
+          et diam. Suspendisse potenti. Cras neque tortor, consequat eu enim in,
+          suscipit dapibus quam. Quisque eget pulvinar dolor. Etiam porta
+          tincidunt velit, in laoreet elit tincidunt a. Nulla volutpat eleifend
+          dictum.
+        </Paragraph>
+        <Paragraph>
+          Nulla scelerisque nulla leo, et lacinia est feugiat eu. Morbi
+          dignissim nulla lectus, in fermentum felis ullamcorper nec. Proin at
+          ligula eros. Ut non erat gravida orci tempus fringilla vitae nec nisl.
+          In varius, dui scelerisque blandit malesuada, erat ante placerat
+          ipsum, eget malesuada neque leo vitae tortor. Praesent eleifend felis
+          velit, id egestas lorem blandit id. Nulla pulvinar nisi malesuada
+          mauris tempus, ac lobortis dolor sagittis.
+        </Paragraph>
+        <Heading level={6}>Cras fermentum porta</Heading>
+        <Paragraph>
+          Cras fermentum porta enim, at pellentesque diam egestas sit amet. Sed
+          sed auctor odio. Donec turpis purus, aliquam non nisi quis, mollis
+          tempor metus. Phasellus cursus nulla et ipsum vehicula, fringilla
+          aliquam nisi venenatis. Donec consequat venenatis nisl at egestas.
+          Proin scelerisque sagittis turpis. Curabitur gravida, purus non congue
+          condimentum, urna mauris fringilla ante, sed finibus ante tellus vitae
+          lectus. Pellentesque in imperdiet ligula.
+        </Paragraph>
+        <Paragraph>
+          Etiam rutrum mi sit amet pulvinar suscipit. Praesent quis enim ac orci
+          elementum tempor congue sodales erat. Suspendisse potenti. Proin et
+          feugiat quam. Mauris vel laoreet lectus, sit amet bibendum dolor.
+          Fusce ut odio semper, tincidunt tortor et, imperdiet velit. Donec
+          lacinia diam a enim porttitor, sit amet blandit nisl congue. Praesent
+          cursus lorem eget vehicula auctor. Praesent tincidunt interdum
+          elementum. Vestibulum vel accumsan lacus. Integer eget volutpat nibh,
+          nec ornare nulla. Duis id velit pulvinar, finibus nunc eget,
+          ullamcorper libero. Vivamus leo ex, interdum in auctor non, tempor
+          vehicula dui. Vestibulum sed efficitur eros. Donec lacinia ultrices
+          eros vel mattis.
+        </Paragraph>
+      </Stack>
     </article>
   );
 }
diff --git a/apps/react-example/src/examples/Typography/__snapshots__/TypographyExample.test.tsx.snap b/apps/react-example/src/examples/Typography/__snapshots__/TypographyExample.test.tsx.snap
index 7062366..6788200 100644
--- a/apps/react-example/src/examples/Typography/__snapshots__/TypographyExample.test.tsx.snap
+++ b/apps/react-example/src/examples/Typography/__snapshots__/TypographyExample.test.tsx.snap
@@ -4,160 +4,165 @@ exports[`TypographyExample > should render the example 1`] = `
 <article
   data-testid="typographyExample"
 >
-  <h1
-    className="tui__heading"
+  <div
+    className="tui__stack tui__stack-vertical"
   >
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  </h1>
-  <p
-    className="tui__paragraph"
-  >
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia cursus ex, in lacinia est.
-     
-    <strong
-      className="tui__text"
-    >
-      Vivamus rhoncus mollis
-    </strong>
-     felis nec efficitur. Maecenas id malesuada quam. Suspendisse aliquam urna sed posuere malesuada. Ut viverra ipsum eget ipsum eleifend dignissim. Nullam vitae nunc quam. Ut aliquam pharetra nunc, eget posuere nisi viverra sed. Vivamus nec nibh at est ultrices laoreet volutpat ut sapien. Sed scelerisque augue nec ex interdum, in tincidunt nunc imperdiet. Sed lacinia vulputate sem eu pharetra. Ut faucibus dui urna, ac maximus eros finibus eget. Cras imperdiet odio non erat egestas sagittis. Donec eget odio turpis. Curabitur dictum libero in velit ultrices sollicitudin. Mauris semper vulputate consectetur.
-  </p>
-  <p
-    className="tui__paragraph"
-  >
-    Suspendisse accumsan rhoncus neque. Maecenas molestie sollicitudin semper. Nullam pulvinar sollicitudin justo. Sed sollicitudin lorem at est rutrum, a suscipit lorem venenatis.
-     
-    <mark
-      className="tui__text"
-    >
-      In volutpat, ex eget tempus auctor, lorem turpis finibus dui, et ultrices urna orci eget lorem. Suspendisse mauris tellus, mattis id feugiat vel, imperdiet quis massa. Integer non lacus est.
-    </mark>
-     
-    Suspendisse nunc augue, tristique at enim vel, sollicitudin maximus ante. Quisque rutrum tempor velit non varius. Suspendisse ornare mauris at mi vulputate fringilla.
-  </p>
-  <h2
-    className="tui__heading"
-  >
-    Cras ut ipsum ut erat semper gravida
-  </h2>
-  <p
-    className="tui__paragraph"
-  >
-    Cras ut ipsum ut erat semper gravida. Nam suscipit varius tincidunt. Vestibulum vulputate sed dolor nec laoreet. Cras enim nulla, bibendum eu placerat non, consequat at erat. Nam eleifend maximus faucibus. Praesent sagittis sem non urna consectetur, non fringilla mi posuere. Sed non mi tortor. 
-    <em
-      className="tui__text"
-    >
-      Cras efficitur blandit rhoncus.
-    </em>
-     Cras ullamcorper non diam nec sagittis. Nunc eget lorem eu ex rutrum molestie sed vitae augue. Maecenas in risus libero. Fusce sapien lacus, tristique eget justo sed, auctor fringilla metus. Mauris augue nunc, lobortis in lectus vel, faucibus posuere velit.
-  </p>
-  <blockquote
-    cite="https://source-of-the-quote.example.com"
-    className="tui__blockquote"
-  >
-    <div
-      className="tui__blockquote-quote"
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan ex vel lacinia volutpat. Ut ultricies, mauris et varius finibus, nulla ante efficitur libero, eget convallis odio ex ut neque. Praesent quis odio ac felis pretium pharetra sit amet quis neque. Nam nec libero purus. Maecenas sagittis lobortis lacinia. Aliquam non vehicula metus. Vivamus fringilla ante eget leo pretium cursus. Morbi venenatis diam metus, ut faucibus dolor mollis a. Nulla nec ex sapien. Curabitur a tempor est. Mauris faucibus congue mi, sit amet pulvinar justo porttitor nec. Nunc et eros a est fermentum lacinia id at nisi.
-    </div>
-    <footer>
-      <span
-        className="tui__blockquote-author"
+    <h1
+      className="tui__heading"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    </h1>
+    <p
+      className="tui__paragraph"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia cursus ex, in lacinia est.
+       
+      <strong
+        className="tui__text"
       >
-        —
-        Samuel L. Ipsum
-      </span>
-      <span>
-        , 
-      </span>
-      <cite
-        className="tui__blockquote-source"
+        Vivamus rhoncus mollis
+      </strong>
+       felis nec efficitur. Maecenas id malesuada quam. Suspendisse aliquam urna sed posuere malesuada. Ut viverra ipsum eget ipsum eleifend dignissim. Nullam vitae nunc quam. Ut aliquam pharetra nunc, eget posuere nisi viverra sed. Vivamus nec nibh at est ultrices laoreet volutpat ut sapien. Sed scelerisque augue nec ex interdum, in tincidunt nunc imperdiet. Sed lacinia vulputate sem eu pharetra. Ut faucibus dui urna, ac maximus eros finibus eget. Cras imperdiet odio non erat egestas sagittis. Donec eget odio turpis. Curabitur dictum libero in velit ultrices sollicitudin. Mauris semper vulputate consectetur.
+    </p>
+    <p
+      className="tui__paragraph"
+    >
+      Suspendisse accumsan rhoncus neque. Maecenas molestie sollicitudin semper. Nullam pulvinar sollicitudin justo. Sed sollicitudin lorem at est rutrum, a suscipit lorem venenatis.
+       
+      <mark
+        className="tui__text"
       >
-        Lorem Ipsum
-      </cite>
-    </footer>
-  </blockquote>
-  <p
-    className="tui__paragraph"
-  >
-    Etiam porta purus a aliquam rutrum. Vivamus finibus sed metus et vestibulum. Ut ornare eget mi nec congue. Nunc et dui sed diam viverra porta. Phasellus gravida massa lorem, et ultrices tellus scelerisque eget. Cras congue congue pulvinar. Aliquam aliquet dolor est, eget lobortis tortor efficitur ut. Nam accumsan, nisl quis pretium imperdiet, leo nulla efficitur lectus, eget vestibulum diam lorem id ante. Cras sit amet cursus purus, eget bibendum arcu.
-  </p>
-  <h2
-    className="tui__heading"
-  >
-    Cras sit amet cursus purus
-  </h2>
-  <h3
-    className="tui__heading"
-  >
-    Sed sodales eros
-  </h3>
-  <p
-    className="tui__paragraph"
-  >
-    Sed sodales eros ut arcu tincidunt, et condimentum lacus ultricies. Quisque rhoncus, nulla et vulputate vestibulum, ligula dolor tristique massa, sollicitudin fermentum eros magna nec est. Nulla facilisi. Quisque efficitur turpis sit amet ornare euismod. Pellentesque in neque vitae risus posuere condimentum at in ex. Morbi consequat erat at risus laoreet rhoncus. Suspendisse pharetra bibendum ante eu gravida. Pellentesque interdum eget tortor sed venenatis. Suspendisse mollis turpis non justo sollicitudin convallis. Ut quis eros lacus. Cras aliquam non ex ultrices sollicitudin. Suspendisse efficitur id lorem ut gravida. Morbi laoreet nec magna molestie eleifend. Proin ligula risus, tristique et nunc et, sagittis aliquet lacus. Duis sollicitudin elit vitae nisl rhoncus pretium. Donec at auctor neque.
-  </p>
-  <p
-    className="tui__paragraph"
-  >
-    Nunc imperdiet, dui et molestie congue, odio velit imperdiet lacus, at aliquet nulla urna sit amet orci. Praesent sed dolor luctus, ornare metus id, iaculis ante. Integer non suscipit nunc, eu cursus risus. Nulla vel iaculis est, et viverra metus. Mauris venenatis sodales lacus ultricies scelerisque. Praesent lobortis felis purus, non vulputate leo sollicitudin vitae. In a felis non nunc congue volutpat ut sed orci. Duis volutpat tristique neque ac sodales. Duis faucibus maximus lectus, a aliquam nisi pharetra nec. Sed risus tortor, sollicitudin sed malesuada a, imperdiet vitae nisi. Curabitur ut hendrerit ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tellus nisi, tincidunt vitae justo ac, scelerisque feugiat dolor. Proin vitae erat pretium, luctus lorem eu, imperdiet augue.
-  </p>
-  <h4
-    className="tui__heading"
-  >
-    Vivamus lacinia semper dolor
-  </h4>
-  <p
-    className="tui__paragraph"
-  >
-    Vivamus lacinia semper dolor, et vehicula velit condimentum sed. Proin consequat tellus ac arcu tincidunt aliquet. Ut bibendum sodales justo, in malesuada nulla semper non. Morbi lectus diam, tincidunt varius magna id, congue semper ipsum. Vestibulum nisi eros, aliquet mollis scelerisque ac, aliquam non magna. Suspendisse nec mi cursus, fermentum velit nec, sollicitudin enim. Maecenas elementum in velit vitae viverra. Etiam ut consequat lorem, eget posuere dui. Sed enim massa, ornare ac ipsum venenatis, convallis luctus arcu. Ut vel consectetur arcu.
-  </p>
-  <ul
-    className="tui__list"
-  >
-    <li>
-      Lorem ipsum
-    </li>
-    <li>
-      Dolor sit amet
-    </li>
-    <li>
-      Consectetur adipiscing elit
-    </li>
-  </ul>
-  <p
-    className="tui__paragraph"
-  >
-    Suspendisse convallis mi sed metus consectetur euismod. Proin vel libero nisi. Curabitur nec nunc eget mauris tempus consectetur. Sed et elit at enim luctus imperdiet sollicitudin eu diam. Proin vitae nisi ornare, ullamcorper felis sit amet, placerat leo. Integer sapien mauris, cursus fringilla erat quis, commodo pharetra nulla. Vivamus sit amet hendrerit dui, eu egestas dolor. Donec interdum convallis velit ut pellentesque. Quisque eu ultrices nisi. Integer eleifend ante ut scelerisque porta. Aenean accumsan eget velit vestibulum iaculis. Praesent elementum fermentum massa vitae sollicitudin. Sed eget maximus leo, ac aliquam quam.
-  </p>
-  <h5
-    className="tui__heading"
-  >
-    Integer maximus sapien
-  </h5>
-  <p
-    className="tui__paragraph"
-  >
-    Integer maximus sapien a libero venenatis, id vulputate leo molestie. Suspendisse pellentesque, turpis vel vehicula varius, quam purus dapibus orci, at molestie tortor massa ut purus. Maecenas sit amet vulputate ex. Suspendisse nec nibh vitae erat rhoncus semper feugiat et diam. Suspendisse potenti. Cras neque tortor, consequat eu enim in, suscipit dapibus quam. Quisque eget pulvinar dolor. Etiam porta tincidunt velit, in laoreet elit tincidunt a. Nulla volutpat eleifend dictum.
-  </p>
-  <p
-    className="tui__paragraph"
-  >
-    Nulla scelerisque nulla leo, et lacinia est feugiat eu. Morbi dignissim nulla lectus, in fermentum felis ullamcorper nec. Proin at ligula eros. Ut non erat gravida orci tempus fringilla vitae nec nisl. In varius, dui scelerisque blandit malesuada, erat ante placerat ipsum, eget malesuada neque leo vitae tortor. Praesent eleifend felis velit, id egestas lorem blandit id. Nulla pulvinar nisi malesuada mauris tempus, ac lobortis dolor sagittis.
-  </p>
-  <h6
-    className="tui__heading"
-  >
-    Cras fermentum porta
-  </h6>
-  <p
-    className="tui__paragraph"
-  >
-    Cras fermentum porta enim, at pellentesque diam egestas sit amet. Sed sed auctor odio. Donec turpis purus, aliquam non nisi quis, mollis tempor metus. Phasellus cursus nulla et ipsum vehicula, fringilla aliquam nisi venenatis. Donec consequat venenatis nisl at egestas. Proin scelerisque sagittis turpis. Curabitur gravida, purus non congue condimentum, urna mauris fringilla ante, sed finibus ante tellus vitae lectus. Pellentesque in imperdiet ligula.
-  </p>
-  <p
-    className="tui__paragraph"
-  >
-    Etiam rutrum mi sit amet pulvinar suscipit. Praesent quis enim ac orci elementum tempor congue sodales erat. Suspendisse potenti. Proin et feugiat quam. Mauris vel laoreet lectus, sit amet bibendum dolor. Fusce ut odio semper, tincidunt tortor et, imperdiet velit. Donec lacinia diam a enim porttitor, sit amet blandit nisl congue. Praesent cursus lorem eget vehicula auctor. Praesent tincidunt interdum elementum. Vestibulum vel accumsan lacus. Integer eget volutpat nibh, nec ornare nulla. Duis id velit pulvinar, finibus nunc eget, ullamcorper libero. Vivamus leo ex, interdum in auctor non, tempor vehicula dui. Vestibulum sed efficitur eros. Donec lacinia ultrices eros vel mattis.
-  </p>
+        In volutpat, ex eget tempus auctor, lorem turpis finibus dui, et ultrices urna orci eget lorem. Suspendisse mauris tellus, mattis id feugiat vel, imperdiet quis massa. Integer non lacus est.
+      </mark>
+       
+      Suspendisse nunc augue, tristique at enim vel, sollicitudin maximus ante. Quisque rutrum tempor velit non varius. Suspendisse ornare mauris at mi vulputate fringilla.
+    </p>
+    <h2
+      className="tui__heading"
+    >
+      Cras ut ipsum ut erat semper gravida
+    </h2>
+    <p
+      className="tui__paragraph"
+    >
+      Cras ut ipsum ut erat semper gravida. Nam suscipit varius tincidunt. Vestibulum vulputate sed dolor nec laoreet. Cras enim nulla, bibendum eu placerat non, consequat at erat. Nam eleifend maximus faucibus. Praesent sagittis sem non urna consectetur, non fringilla mi posuere. Sed non mi tortor.
+       
+      <em
+        className="tui__text"
+      >
+        Cras efficitur blandit rhoncus.
+      </em>
+       Cras ullamcorper non diam nec sagittis. Nunc eget lorem eu ex rutrum molestie sed vitae augue. Maecenas in risus libero. Fusce sapien lacus, tristique eget justo sed, auctor fringilla metus. Mauris augue nunc, lobortis in lectus vel, faucibus posuere velit.
+    </p>
+    <blockquote
+      cite="https://source-of-the-quote.example.com"
+      className="tui__blockquote"
+    >
+      <div
+        className="tui__blockquote-quote"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan ex vel lacinia volutpat. Ut ultricies, mauris et varius finibus, nulla ante efficitur libero, eget convallis odio ex ut neque. Praesent quis odio ac felis pretium pharetra sit amet quis neque. Nam nec libero purus. Maecenas sagittis lobortis lacinia. Aliquam non vehicula metus. Vivamus fringilla ante eget leo pretium cursus. Morbi venenatis diam metus, ut faucibus dolor mollis a. Nulla nec ex sapien. Curabitur a tempor est. Mauris faucibus congue mi, sit amet pulvinar justo porttitor nec. Nunc et eros a est fermentum lacinia id at nisi.
+      </div>
+      <footer>
+        <span
+          className="tui__blockquote-author"
+        >
+          —
+          Samuel L. Ipsum
+        </span>
+        <span>
+          , 
+        </span>
+        <cite
+          className="tui__blockquote-source"
+        >
+          Lorem Ipsum
+        </cite>
+      </footer>
+    </blockquote>
+    <p
+      className="tui__paragraph"
+    >
+      Etiam porta purus a aliquam rutrum. Vivamus finibus sed metus et vestibulum. Ut ornare eget mi nec congue. Nunc et dui sed diam viverra porta. Phasellus gravida massa lorem, et ultrices tellus scelerisque eget. Cras congue congue pulvinar. Aliquam aliquet dolor est, eget lobortis tortor efficitur ut. Nam accumsan, nisl quis pretium imperdiet, leo nulla efficitur lectus, eget vestibulum diam lorem id ante. Cras sit amet cursus purus, eget bibendum arcu.
+    </p>
+    <h2
+      className="tui__heading"
+    >
+      Cras sit amet cursus purus
+    </h2>
+    <h3
+      className="tui__heading"
+    >
+      Sed sodales eros
+    </h3>
+    <p
+      className="tui__paragraph"
+    >
+      Sed sodales eros ut arcu tincidunt, et condimentum lacus ultricies. Quisque rhoncus, nulla et vulputate vestibulum, ligula dolor tristique massa, sollicitudin fermentum eros magna nec est. Nulla facilisi. Quisque efficitur turpis sit amet ornare euismod. Pellentesque in neque vitae risus posuere condimentum at in ex. Morbi consequat erat at risus laoreet rhoncus. Suspendisse pharetra bibendum ante eu gravida. Pellentesque interdum eget tortor sed venenatis. Suspendisse mollis turpis non justo sollicitudin convallis. Ut quis eros lacus. Cras aliquam non ex ultrices sollicitudin. Suspendisse efficitur id lorem ut gravida. Morbi laoreet nec magna molestie eleifend. Proin ligula risus, tristique et nunc et, sagittis aliquet lacus. Duis sollicitudin elit vitae nisl rhoncus pretium. Donec at auctor neque.
+    </p>
+    <p
+      className="tui__paragraph"
+    >
+      Nunc imperdiet, dui et molestie congue, odio velit imperdiet lacus, at aliquet nulla urna sit amet orci. Praesent sed dolor luctus, ornare metus id, iaculis ante. Integer non suscipit nunc, eu cursus risus. Nulla vel iaculis est, et viverra metus. Mauris venenatis sodales lacus ultricies scelerisque. Praesent lobortis felis purus, non vulputate leo sollicitudin vitae. In a felis non nunc congue volutpat ut sed orci. Duis volutpat tristique neque ac sodales. Duis faucibus maximus lectus, a aliquam nisi pharetra nec. Sed risus tortor, sollicitudin sed malesuada a, imperdiet vitae nisi. Curabitur ut hendrerit ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tellus nisi, tincidunt vitae justo ac, scelerisque feugiat dolor. Proin vitae erat pretium, luctus lorem eu, imperdiet augue.
+    </p>
+    <h4
+      className="tui__heading"
+    >
+      Vivamus lacinia semper dolor
+    </h4>
+    <p
+      className="tui__paragraph"
+    >
+      Vivamus lacinia semper dolor, et vehicula velit condimentum sed. Proin consequat tellus ac arcu tincidunt aliquet. Ut bibendum sodales justo, in malesuada nulla semper non. Morbi lectus diam, tincidunt varius magna id, congue semper ipsum. Vestibulum nisi eros, aliquet mollis scelerisque ac, aliquam non magna. Suspendisse nec mi cursus, fermentum velit nec, sollicitudin enim. Maecenas elementum in velit vitae viverra. Etiam ut consequat lorem, eget posuere dui. Sed enim massa, ornare ac ipsum venenatis, convallis luctus arcu. Ut vel consectetur arcu.
+    </p>
+    <ul
+      className="tui__list"
+    >
+      <li>
+        Lorem ipsum
+      </li>
+      <li>
+        Dolor sit amet
+      </li>
+      <li>
+        Consectetur adipiscing elit
+      </li>
+    </ul>
+    <p
+      className="tui__paragraph"
+    >
+      Suspendisse convallis mi sed metus consectetur euismod. Proin vel libero nisi. Curabitur nec nunc eget mauris tempus consectetur. Sed et elit at enim luctus imperdiet sollicitudin eu diam. Proin vitae nisi ornare, ullamcorper felis sit amet, placerat leo. Integer sapien mauris, cursus fringilla erat quis, commodo pharetra nulla. Vivamus sit amet hendrerit dui, eu egestas dolor. Donec interdum convallis velit ut pellentesque. Quisque eu ultrices nisi. Integer eleifend ante ut scelerisque porta. Aenean accumsan eget velit vestibulum iaculis. Praesent elementum fermentum massa vitae sollicitudin. Sed eget maximus leo, ac aliquam quam.
+    </p>
+    <h5
+      className="tui__heading"
+    >
+      Integer maximus sapien
+    </h5>
+    <p
+      className="tui__paragraph"
+    >
+      Integer maximus sapien a libero venenatis, id vulputate leo molestie. Suspendisse pellentesque, turpis vel vehicula varius, quam purus dapibus orci, at molestie tortor massa ut purus. Maecenas sit amet vulputate ex. Suspendisse nec nibh vitae erat rhoncus semper feugiat et diam. Suspendisse potenti. Cras neque tortor, consequat eu enim in, suscipit dapibus quam. Quisque eget pulvinar dolor. Etiam porta tincidunt velit, in laoreet elit tincidunt a. Nulla volutpat eleifend dictum.
+    </p>
+    <p
+      className="tui__paragraph"
+    >
+      Nulla scelerisque nulla leo, et lacinia est feugiat eu. Morbi dignissim nulla lectus, in fermentum felis ullamcorper nec. Proin at ligula eros. Ut non erat gravida orci tempus fringilla vitae nec nisl. In varius, dui scelerisque blandit malesuada, erat ante placerat ipsum, eget malesuada neque leo vitae tortor. Praesent eleifend felis velit, id egestas lorem blandit id. Nulla pulvinar nisi malesuada mauris tempus, ac lobortis dolor sagittis.
+    </p>
+    <h6
+      className="tui__heading"
+    >
+      Cras fermentum porta
+    </h6>
+    <p
+      className="tui__paragraph"
+    >
+      Cras fermentum porta enim, at pellentesque diam egestas sit amet. Sed sed auctor odio. Donec turpis purus, aliquam non nisi quis, mollis tempor metus. Phasellus cursus nulla et ipsum vehicula, fringilla aliquam nisi venenatis. Donec consequat venenatis nisl at egestas. Proin scelerisque sagittis turpis. Curabitur gravida, purus non congue condimentum, urna mauris fringilla ante, sed finibus ante tellus vitae lectus. Pellentesque in imperdiet ligula.
+    </p>
+    <p
+      className="tui__paragraph"
+    >
+      Etiam rutrum mi sit amet pulvinar suscipit. Praesent quis enim ac orci elementum tempor congue sodales erat. Suspendisse potenti. Proin et feugiat quam. Mauris vel laoreet lectus, sit amet bibendum dolor. Fusce ut odio semper, tincidunt tortor et, imperdiet velit. Donec lacinia diam a enim porttitor, sit amet blandit nisl congue. Praesent cursus lorem eget vehicula auctor. Praesent tincidunt interdum elementum. Vestibulum vel accumsan lacus. Integer eget volutpat nibh, nec ornare nulla. Duis id velit pulvinar, finibus nunc eget, ullamcorper libero. Vivamus leo ex, interdum in auctor non, tempor vehicula dui. Vestibulum sed efficitur eros. Donec lacinia ultrices eros vel mattis.
+    </p>
+  </div>
 </article>
 `;
diff --git a/packages/react/src/components/Stack/Stack.test.tsx b/packages/react/src/components/Stack/Stack.test.tsx
new file mode 100644
index 0000000..05bb12b
--- /dev/null
+++ b/packages/react/src/components/Stack/Stack.test.tsx
@@ -0,0 +1,32 @@
+import {
+  componentToJson,
+  describe,
+  expect,
+  it,
+  render,
+  renderer,
+  screen,
+} from "../../../test";
+import { Stack } from "./Stack";
+
+const defaultStack = (
+  <Stack testId="stack">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+  </Stack>
+);
+
+describe("Stack", async () => {
+  it("should render the stack", () => {
+    expect(componentToJson(renderer.create(defaultStack))).toMatchSnapshot();
+
+    render(defaultStack);
+
+    const stack = screen.getByTestId("stack");
+    const stackedElements = stack.getElementsByTagName("div");
+
+    expect(stack).toBeInTheDocument();
+    expect(stackedElements.length).toBe(3);
+  });
+});
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
new file mode 100644
index 0000000..39c1099
--- /dev/null
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -0,0 +1,38 @@
+import { CommonComponentProps, cn } from "@themeless-ui/utils";
+import { ReactNode } from "react";
+
+export type StackProps = {
+  /**
+   * The direction to stack the elements.
+   */
+  direction?: "vertical" | "horizontal";
+
+  /**
+   * The elements to be stacked.
+   */
+  children?: ReactNode;
+} & CommonComponentProps;
+
+const stackClassName = cn("stack");
+const verticalClassName = cn("stack-vertical");
+const horizontalClassName = cn("stack-horizontal");
+
+/**
+ * Display a stack of items.
+ */
+export function Stack({
+  direction = "vertical",
+  children,
+  testId,
+}: StackProps) {
+  const classNames = [
+    stackClassName,
+    direction === "vertical" ? verticalClassName : horizontalClassName,
+  ].join(" ");
+
+  return (
+    <div className={classNames} data-testid={testId}>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/react/src/components/Stack/__snapshots__/Stack.test.tsx.snap b/packages/react/src/components/Stack/__snapshots__/Stack.test.tsx.snap
new file mode 100644
index 0000000..bb47b44
--- /dev/null
+++ b/packages/react/src/components/Stack/__snapshots__/Stack.test.tsx.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Stack > should render the stack 1`] = `
+<div
+  className="tui__stack tui__stack-vertical"
+  data-testid="stack"
+>
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+</div>
+`;
diff --git a/packages/react/src/components/Stack/index.ts b/packages/react/src/components/Stack/index.ts
new file mode 100644
index 0000000..0247c68
--- /dev/null
+++ b/packages/react/src/components/Stack/index.ts
@@ -0,0 +1,2 @@
+export { Stack } from "./Stack";
+export type { StackProps } from "./Stack";
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 31d5412..0521f1f 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -4,4 +4,5 @@ export * from "./Button";
 export * from "./Heading";
 export * from "./List";
 export * from "./Paragraph";
+export * from "./Stack";
 export * from "./Text";
diff --git a/packages/style/src/components/stack.css b/packages/style/src/components/stack.css
new file mode 100644
index 0000000..6833a7c
--- /dev/null
+++ b/packages/style/src/components/stack.css
@@ -0,0 +1,12 @@
+.tui__stack {
+  display: flex;
+  box-sizing: border-box;
+}
+
+.tui__stack-vertical {
+  flex-flow: column nowrap;
+}
+
+.tui__stack-horizontal {
+  flex-flow: row nowrap;
+}
diff --git a/packages/style/src/index.css b/packages/style/src/index.css
index 815e501..b42aefc 100644
--- a/packages/style/src/index.css
+++ b/packages/style/src/index.css
@@ -13,4 +13,5 @@
 @import "./components/heading.css";
 @import "./components/list.css";
 @import "./components/paragraph.css";
+@import "./components/stack.css";
 @import "./components/text.css";