diff --git a/packages/docs/.source/index.js b/packages/docs/.source/index.js
index 9192669..a17f9ba 100644
--- a/packages/docs/.source/index.js
+++ b/packages/docs/.source/index.js
@@ -1,4 +1,9 @@
 import { toRuntime, toRuntimeAsync } from "fumadocs-mdx"
+import * as meta_0 from "../content/docs/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
+import * as meta_1 from "../content/docs/components/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
+import * as meta_2 from "../content/docs/examples/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
+import * as meta_3 from "../content/docs/text/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
+import * as meta_4 from "../content/docs/theme/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
 import * as docs_0 from "../content/docs/grid-system.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
 import * as docs_1 from "../content/docs/components/article.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
 import * as docs_2 from "../content/docs/components/data.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
@@ -18,10 +23,5 @@ import * as docs_15 from "../content/docs/text/index.mdx?collection=docs&hash=4f
 import * as docs_16 from "../content/docs/text/kicker.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
 import * as docs_17 from "../content/docs/text/quote.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
 import * as docs_18 from "../content/docs/theme/index.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
-import * as meta_0 from "../content/docs/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
-import * as meta_1 from "../content/docs/components/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
-import * as meta_2 from "../content/docs/examples/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
-import * as meta_3 from "../content/docs/theme/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
-import * as meta_4 from "../content/docs/text/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3"
 export const docs = [toRuntime("doc", docs_0, {"path":"grid-system.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/grid-system.mdx"}), toRuntime("doc", docs_1, {"path":"components/article.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/article.mdx"}), toRuntime("doc", docs_2, {"path":"components/data.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/data.mdx"}), toRuntime("doc", docs_3, {"path":"components/footer.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/footer.mdx"}), toRuntime("doc", docs_4, {"path":"components/layout.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/layout.mdx"}), toRuntime("doc", docs_5, {"path":"components/masthead.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/masthead.mdx"}), toRuntime("doc", docs_6, {"path":"components/media.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/media.mdx"}), toRuntime("doc", docs_7, {"path":"components/rule.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/rule.mdx"}), toRuntime("doc", docs_8, {"path":"examples/blackletter.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/examples/blackletter.mdx"}), toRuntime("doc", docs_9, {"path":"examples/nyt-frontpage.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/examples/nyt-frontpage.mdx"}), toRuntime("doc", docs_10, {"path":"examples/responsive.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/examples/responsive.mdx"}), toRuntime("doc", docs_11, {"path":"examples/spanning.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/examples/spanning.mdx"}), toRuntime("doc", docs_12, {"path":"text/bodytext.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/bodytext.mdx"}), toRuntime("doc", docs_13, {"path":"text/byline.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/byline.mdx"}), toRuntime("doc", docs_14, {"path":"text/headline.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/headline.mdx"}), toRuntime("doc", docs_15, {"path":"text/index.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/index.mdx"}), toRuntime("doc", docs_16, {"path":"text/kicker.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/kicker.mdx"}), toRuntime("doc", docs_17, {"path":"text/quote.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/quote.mdx"}), toRuntime("doc", docs_18, {"path":"theme/index.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/theme/index.mdx"})];
-export const meta = [toRuntime("meta", meta_0, {"path":"meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/meta.json"}), toRuntime("meta", meta_1, {"path":"components/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/meta.json"}), toRuntime("meta", meta_2, {"path":"examples/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/examples/meta.json"}), toRuntime("meta", meta_3, {"path":"theme/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/theme/meta.json"}), toRuntime("meta", meta_4, {"path":"text/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/meta.json"})];
\ No newline at end of file
+export const meta = [toRuntime("meta", meta_0, {"path":"meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/meta.json"}), toRuntime("meta", meta_1, {"path":"components/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/meta.json"}), toRuntime("meta", meta_2, {"path":"examples/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/examples/meta.json"}), toRuntime("meta", meta_3, {"path":"text/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/meta.json"}), toRuntime("meta", meta_4, {"path":"theme/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/theme/meta.json"})];
\ No newline at end of file
diff --git a/packages/docs/app/docs/[[...slug]]/page.tsx b/packages/docs/app/docs/[[...slug]]/page.tsx
index fa24209..edfe1f3 100644
--- a/packages/docs/app/docs/[[...slug]]/page.tsx
+++ b/packages/docs/app/docs/[[...slug]]/page.tsx
@@ -1,6 +1,7 @@
 import { source } from '@/lib/source';
 import { DocsPage, DocsBody } from 'fumadocs-ui/page';
 import { notFound } from 'next/navigation';
+import { useMDXComponents } from '../../../mdx-components';
 
 export default async function Page(props: { params: Promise<{ slug?: string[] }> }) {
   const params = await props.params;
@@ -8,10 +9,11 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
   if (!page) notFound();
 
   const MDX = page.data.body;
+  const components = useMDXComponents({});
   return (
     <DocsPage toc={page.data.toc}>
       <DocsBody>
-        <MDX />
+        <MDX components={components} />
       </DocsBody>
     </DocsPage>
   );
diff --git a/packages/docs/content/docs/components/media.mdx b/packages/docs/content/docs/components/media.mdx
index 6cab793..82e919b 100644
--- a/packages/docs/content/docs/components/media.mdx
+++ b/packages/docs/content/docs/components/media.mdx
@@ -25,6 +25,19 @@ description: Image、Figure、Video、PullQuote — 报纸版面中的视觉元
 | `credit` | `string` | - | 摄影师/来源（small-caps 渲染）。 |
 | `span` | `number` | - | 跨栏数。 |
 
+<Layout columns={24} padding="0">
+<Section columns={24}>
+<Article span={24}>
+<Figure
+  src="https://images.unsplash.com/photo-1495020689067-958852a7765e?w=800&h=400&fit=crop"
+  alt="Newspapers on a wooden table"
+  caption="A view of the morning editions, arranged on the newsroom table."
+  credit="Photograph by Roman Kraft / Unsplash"
+/>
+</Article>
+</Section>
+</Layout>
+
 ```tsx
 <Figure
   src="https://images.unsplash.com/photo-1495020689067-958852a7765e?w=800&h=400&fit=crop"
@@ -61,6 +74,16 @@ Video 组件与 Figure 结构类似，包裹 `<video>` 标签并附带 caption/c
 
 ### 独立使用
 
+<Layout columns={24} padding="0">
+<Section columns={24}>
+<Article span={24}>
+<PullQuote author="Senior Cabinet Official">
+  We have lobbied for this kind of clarity for the better part of a decade.
+</PullQuote>
+</Article>
+</Section>
+</Layout>
+
 ```tsx
 <PullQuote author="Senior Cabinet Official">
   We have lobbied for this kind of clarity for the better part of a decade.
@@ -69,6 +92,18 @@ Video 组件与 Figure 结构类似，包裹 `<video>` 标签并附带 caption/c
 
 ### 在多栏 BodyText 内跨栏
 
+<Layout columns={24} padding="0">
+<Section columns={24}>
+<Article span={24}>
+<BodyText columns={3}>
+  <p>After eleven consecutive days of negotiation that several participants described as the most demanding in a generation, delegates announced a sweeping framework.</p>
+  <PullQuote spanAllColumns author="Margarethe Lindqvist">A long argument that finally became a conversation.</PullQuote>
+  <p>Markets reacted with measured optimism. The continental composite index closed up 1.2 percent, led by capital-goods makers.</p>
+</BodyText>
+</Article>
+</Section>
+</Layout>
+
 ```tsx
 <BodyText columns={3}>
   <p>...</p>
diff --git a/packages/docs/lib/nui-client.tsx b/packages/docs/lib/nui-client.tsx
new file mode 100644
index 0000000..0cbb0d8
--- /dev/null
+++ b/packages/docs/lib/nui-client.tsx
@@ -0,0 +1,7 @@
+'use client';
+export {
+  Layout, Section, Article, Layer, Masthead, Rule, Footer,
+  Headline, Subhead, Kicker, BodyText, Quote, Byline, Dateline, Caption,
+  Image, Figure, Video, PullQuote,
+  BreakingNewsBanner, Folio, IndexBox, Factbox, RelatedArticles, AuthorCard,
+} from 'newspaperui';
diff --git a/packages/docs/mdx-components.tsx b/packages/docs/mdx-components.tsx
index f1ffc5c..9404d3b 100644
--- a/packages/docs/mdx-components.tsx
+++ b/packages/docs/mdx-components.tsx
@@ -1,9 +1,19 @@
 import type { MDXComponents } from 'mdx/types';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
+import {
+  Layout, Section, Article, Layer, Masthead, Rule, Footer,
+  Headline, Subhead, Kicker, BodyText, Quote, Byline, Dateline, Caption,
+  Image, Figure, Video, PullQuote,
+  BreakingNewsBanner, Folio, IndexBox, Factbox, RelatedArticles, AuthorCard,
+} from './lib/nui-client';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...defaultMdxComponents,
     ...components,
+    Layout, Section, Article, Layer, Masthead, Rule, Footer,
+    Headline, Subhead, Kicker, BodyText, Quote, Byline, Dateline, Caption,
+    Image, Figure, Video, PullQuote,
+    BreakingNewsBanner, Folio, IndexBox, Factbox, RelatedArticles, AuthorCard,
   };
 }