घटक

कार्ड, स्टेप्स, टैब, अकॉर्डियन, बैज, कोड ग्रुप, फ़्रेम, ट्री, टाइप टेबल, लाइव प्रीव्यू और डिफ़ — अंतर्निहित घटक, जो किसी भी MDX पेज में उपयोग किए जा सकते हैं।

Blume एक सुलभ, थीम-योग्य घटक सेट के साथ आता है जो किसी भी .mdx पेज में बिना किसी import के उपलब्ध है। हर एक को नीचे एक लाइव प्रीव्यू और उसके सोर्स के साथ दिखाया गया है। घटक वनीला हैं और React-मुक्त हैं; React तभी सक्रिय होता है जब आपका प्रोजेक्ट इसका उपयोग करता है — प्रोजेक्ट में कोई भी .tsx या .jsx फ़ाइल, एक React आइलैंड, <Component> उदाहरण, या घटक ओवरराइड — या जब असिस्टेंट सक्षम हो।

कोई घटक उन प्रॉप्स को अनदेखा करता है जिन्हें वह नहीं लेता। अधिकांश घटक अपने चाइल्ड दिखाते हैं, इसलिए अन्य दस्तावेज़ टूल की लिखावट खाली रेंडर हो सकती है: VitePress का <Badge type="tip" text="beta" /> बिना किसी चाइल्ड वाला एक Badge है, जो कुछ भी नहीं दिखाता। जब किसी चाइल्ड-रहित घटक को ऐसे प्रॉप्स दिए जाते हैं जिन्हें वह नहीं लेता, तो Blume उसके बारे में BLUME_UNKNOWN_PROP के रूप में चेतावनी देता है, साथ ही वे प्रॉप्स भी बताता है जिन्हें वह लेता है। इसके बजाय सामग्री को टैग के बीच लिखें: <Badge>beta</Badge>।

Card और CardGroup

कार्ड किसी गंतव्य से एक आइकन, शीर्षक और छोटे विवरण के साथ लिंक करते हैं। उत्तरदायी ग्रिड के लिए उन्हें CardGroup से समूहबद्ध करें। इनका उपयोग लैंडिंग पेजों, सेक्शन इंडेक्स और “अगले कदम” पर करें — जहाँ भी आप पाठक को आगे की ओर मार्गदर्शित कर रहे हों।

<CardGroup cols={2}>
  <Card title="Quickstart" href="/docs/quickstart" icon="rocket">
    Install Blume and ship your first page.
  </Card>
  <Card title="Components" href="/docs/content/components" icon="folder">
    Browse the component library.
  </Card>
</CardGroup>

Card में title, एक वैकल्पिक href (क्लिक न किए जा सकने वाले कार्ड के लिए इसे छोड़ दें), और Blume के अंतर्निहित आइकन सेट से एक icon लिया जाता है। CardGroup में cols लिया जाता है (डिफ़ॉल्ट 2)।

एक कार्ड में img भी लिया जाता है, जो उसके शीर्ष पर फैली एक इमेज है (या horizontal के साथ, sm ब्रेकपॉइंट और उससे ऊपर टेक्स्ट के बगल में), जिसे किसी Markdown इमेज के पथ की तरह दिया जाता है: पेज के बगल की कोई फ़ाइल (./cover.png), public/ के अंतर्गत कोई पथ, या कोई URL; cta, टेक्स्ट के नीचे एक्सेंट रंग में एक कॉल-टू-एक्शन पंक्ति; arrow, शीर्षक और CTA के बाद एक तीर (डिफ़ॉल्ट रूप से केवल बाहरी लिंक के लिए दिखाया जाता है); type, जो कार्ड को रंगत देता है और किसी कॉलआउट की तरह एक मेल खाता आइकन चुनता है (note, info, tip, check, warning, या danger); और color, आइकन के लिए कोई भी CSS रंग।

Steps

क्रमबद्ध निर्देशों के लिए एक क्रमांकित ऊर्ध्वाधर अनुक्रम — इंस्टॉल, सेटअप प्रवाह और ऐसे ट्यूटोरियल जहाँ क्रम मायने रखता है। हर Step में एक title और एक वैकल्पिक icon लिया जाता है, जो उसके मार्कर में संख्या के स्थान पर दिखाया जाता है। Steps पर titleSize स्टेप शीर्षकों का आकार बॉडी टेक्स्ट (p, डिफ़ॉल्ट) या किसी h4, h3, या h2 हेडिंग की तरह निर्धारित करता है।

<Steps>
  <Step title="Install Blume">Add the package to your project.</Step>
  <Step title="Write a page">
    Drop an `.mdx` file into your content folder.
  </Step>
  <Step title="Ship it">Run `blume build` and deploy `dist/`.</Step>
</Steps>

Tabs

समतुल्य सामग्री के बीच वहीं पर स्विच करें — भाषा के प्रकार, OS-विशिष्ट कमांड, या वैकल्पिक तरीके — बिना सब कुछ पेज पर ढेर किए। हर Tab में एक title लिया जाता है।

<Tabs>
  <Tab title="macOS">Use Homebrew to install the toolchain.</Tab>
  <Tab title="Windows">Use winget to install the toolchain.</Tab>
</Tabs>

बॉर्डर वाले बॉक्स के बजाय बिना बॉर्डर के रेंडर करने के लिए inline जोड़ें — पूरी चौड़ाई की एक रेखा पर टैब पट्टी, जिसके नीचे सामग्री गद्य की तरह प्रवाहित होती है। हैश के बजाय सक्रिय टैब को किसी URL क्वेरी पैरामीटर से सिंक करने के लिए param जोड़ें, जिससे चयन साझा करने योग्य बन जाता है: ?install=windows पर समाप्त होने वाला लिंक Windows टैब पर खुलता है। हर समूह अपने स्वयं के param से सिंक होता है, इसलिए आप एक ही पेज पर कई स्वतंत्र, डीप-लिंक करने योग्य समूह उपयोग कर सकते हैं।

समान शीर्षक वाले टैब रखने वाले समूह एक साथ स्विच होते हैं — किसी एक में “macOS” चुनें और macOS टैब वाला हर समूह उसका अनुसरण करता है। उस सिंकिंग को सीमित करने के लिए syncKey जोड़ें: केवल एक ही कुंजी साझा करने वाले समूह एक साथ स्विच होते हैं, इसलिए ऐसे असंबंधित समूह जो संयोगवश कोई टैब शीर्षक साझा करते हैं, स्वतंत्र बने रहते हैं; या किसी समूह को इससे पूरी तरह बाहर रखने के लिए sync={false} जोड़ें।

सक्रिय टैब URL हैश में लिखा जाता है, इसलिए कोई लिंक उसी टैब पर खुलता है; URL को अपरिवर्तित छोड़ने के लिए hash={false} पास करें। जब कोई लिंक या सिंक किया गया चयन किसी टैब को नहीं चुनता, तो defaultTabIndex वह टैब चुनता है जो पहले खुलता है (शून्य-आधारित, डिफ़ॉल्ट 0)। dropdown टैब पट्टी को एक सेलेक्ट मेन्यू से बदल देता है (केवल बॉक्स वाले लेआउट में), borderBottom={false} पट्टी के नीचे की रेखा हटा देता है, और हर Tab में एक icon लिया जाता है जो उसके शीर्षक से पहले दिखाया जाता है।

<Tabs inline param="install">
  <Tab title="macOS">Use Homebrew to install the toolchain.</Tab>
  <Tab title="Windows">Use winget to install the toolchain.</Tab>
</Tabs>

View

<View> ब्लॉक के साथ कई दर्शकों के लिए एक ही पेज लिखें, जैसे विभिन्न प्रोग्रामिंग भाषाओं या फ़्रेमवर्क के पाठक। हर अलग title पेज की सामग्री के ऊपर एक पिकर में एक विकल्प बन जाता है, और केवल चुने गए व्यू के ब्लॉक दिखाई देते हैं। विषय-सूची भी इसका अनुसरण करती है: छिपे हुए व्यू के भीतर की हेडिंग उससे हट जाती हैं। किसी भी <View> के बाहर का गद्य हर व्यू में दिखाई देता है, और एक ही शीर्षक साझा करने वाले ब्लॉक एक साथ दिखते और छिपते हैं, इसलिए कोई पेज साझा और व्यू-विशिष्ट सेक्शन को बारी-बारी से रख सकता है। icon पिकर में व्यू के नाम के बगल में दिखाया जाता है।

Everyone reads this paragraph.

<View title="JavaScript" icon="braces">

## Install the client

```bash
npm install @acme/commerce
```

</View>

<View title="Python" icon="terminal">

## Install the client

```bash
pip install acme-commerce
```

</View>

जब तक पाठक कोई दूसरा व्यू नहीं चुनता, तब तक पहला व्यू दिखाई देता है। Blume व्यू में लिखे गए पेजों में उस चयन को याद रखता है, और उसे URL में ?view=Python के रूप में लिखता है, इसलिए कोई लिंक उसी व्यू पर खुलता है। किसी व्यू के भीतर की हेडिंग का लिंक उस व्यू को खोलता है। जब पेज का अधिकांश भाग चयन के साथ बदलता हो तो <View> का उपयोग करें, और जब पेज का केवल एक भाग बदलता हो तो Tabs का। एजेंट-उन्मुख Markdown में हर व्यू शामिल होता है, प्रत्येक अपने नाम के अंतर्गत।

Callout

<Callout> वह घटक है जो कॉलआउट डायरेक्टिव के पीछे काम करता है: :::warning[Heads up] <Callout type="warning" title="Heads up"> रेंडर करता है। जब किसी कॉलआउट को अपने स्वयं के आइकन या रंग की आवश्यकता हो, जिसे कोई डायरेक्टिव सेट नहीं कर सकता, तो स्वयं घटक लिखें।

<Callout type="tip" title="Ship it" icon="rocket">
  Run `blume build` before you deploy.
</Callout>

type रंगत और डिफ़ॉल्ट आइकन सेट करता है: note, info (डिफ़ॉल्ट), tip, success (या check), warning, या danger। उपनाम caution, error, important और warn केवल ::: रूप में काम करते हैं। title एक बोल्ड पहली पंक्ति जोड़ता है। icon टाइप के आइकन को बदल देता है और उसमें वही इनपुट लिए जाते हैं जो <Icon> में लिए जाते हैं: एक Lucide नाम, एक इमेज पथ या URL, या एक इनलाइन SVG। color, कोई भी CSS रंग, टाइप की रंगत को बदल देता है: बॉर्डर, आइकन और बॉडी टेक्स्ट पेज की पृष्ठभूमि पर वह रंग ले लेते हैं।

Badge

स्थिति या मेटाडेटा के लिए एक छोटा इनलाइन लेबल — संस्करण टैग, “new” या “beta” चिह्न, स्थिरता स्तर। variant रंग को अर्थ के अनुसार समायोजित करता है।

डिफ़ॉल्ट

बिना किसी विशेष ज़ोर वाला तटस्थ मेटाडेटा।

<Badge>Stable</Badge>

एक्सेंट

आपके थीम एक्सेंट का उपयोग करके ध्यान खींचता है — “new” या फ़ीचर्ड चिह्नों के लिए उपयुक्त।

<Badge variant="accent">New</Badge>

सफलता

एक सकारात्मक या उत्तीर्ण स्थिति।

<Badge variant="success">Passing</Badge>

चेतावनी

कुछ ऐसा जिसे सावधानी से उपयोग करना चाहिए, जैसे कोई प्रायोगिक सुविधा।

<Badge variant="warning">Beta</Badge>

खतरा

एक नकारात्मक या ब्रेकिंग स्थिति, जैसे कोई अप्रचलन।

<Badge variant="danger">Deprecated</Badge>

रंग, आकृति और आकार

variant के अलावा, एक बैज में color लिया जाता है — एक नामित रंगत (blue, green, orange, purple, red, teal, violet, yellow), एक तटस्थ रंग (gray, surface, white, surface-destructive, या white-destructive), या एक हेक्स मान — साथ ही shape (rounded, डिफ़ॉल्ट, या pill), size (xs, sm, डिफ़ॉल्ट रूप से md, या lg), भराव के बजाय आउटलाइन के लिए stroke, लेबल से पहले आइकन के लिए icon, होवर टेक्स्ट के लिए tooltip, और उसे मंद करने के लिए disabled।

आइकन के साथ एक आउटलाइन वाली बैंगनी पिल: प्रीव्यू

<Badge color="purple" icon="sparkles" shape="pill" stroke>Preview</Badge>

Icon

नाम से एक आइकन रेंडर करें — यही icon प्रॉप कार्ड, स्टेप्स, टैब और साइडबार प्रविष्टियों को संचालित करता है। नाम Lucide से आते हैं, छोटे अक्षरों और केबाब-केस में (rocket, gauge, book-open)।

<Icon icon="rocket" size={20} />

Blume केवल Lucide का समर्थन करता है — एक सादा नाम Lucide के विरुद्ध हल होता है, और अन्य आइकन इनपुट के साथ समरूपता के लिए आप नाम से पहले lucide: लगा सकते हैं (lucide:rocket)। size पिक्सेल आकार सेट करता है (डिफ़ॉल्ट 16) और color उसे रंग देता है (कोई भी CSS रंग; डिफ़ॉल्ट currentColor)। अपनी स्वयं की कलाकृति रेंडर करने के लिए नाम के स्थान पर एक कच्चा <svg> स्ट्रिंग, एक इमेज URL, या एक स्थानीय इमेज पथ पास करें, और सहायक तकनीक के सामने उसे प्रकट करने के लिए एक label जोड़ें — इसके बिना आइकन केवल सजावटी होता है।

आइकन बिल्ड समय पर हल होते हैं और शून्य-JS SVG के रूप में इनलाइन होते हैं — रनटाइम पर कुछ भी फ़ेच नहीं किया जाता।

फ़ाइल ट्री

किसी प्रोजेक्ट या फ़ोल्डर की संरचना दर्शाएँ। एक सामान्य Markdown सूची को लपेटें और Blume उसे ट्री के रूप में स्टाइल करता है — सेटअप और कॉन्फ़िग गाइड में संरचना समझाने के लिए उपयोगी।

<FileTree>

- docs/
  - index.mdx
  - guides/
    - configuration.mdx
- blume.config.ts

</FileTree>

Accordion

संबंधित संकुचन योग्य आइटमों को एक ही बॉर्डर वाले कंटेनर में विभाजकों के साथ रखें — FAQ, वैकल्पिक चरण, या लंबे उदाहरण। हर चाइल्ड एक AccordionItem होता है (title, वैकल्पिक icon, description, defaultOpen)। title इनलाइन Markdown रेंडर करता है, इसलिए उसमें मौजूद कोड स्पैन, ज़ोर और लिंक वैसे ही दिखते हैं जैसे किसी वाक्य में दिखते; उसमें मौजूद कच्चा HTML टेक्स्ट के रूप में दिखता है। किसी एकल स्वतंत्र प्रकटीकरण के लिए Expandable का उपयोग करें।

<Accordion>
  <AccordionItem title="Does it support MDX?">
    Yes — every page can be `.md` or `.mdx`.
  </AccordionItem>
  <AccordionItem title="Is the theme customizable?">
    Yes, via Tailwind v4 tokens and your own `theme.css`.
  </AccordionItem>
</Accordion>

Expandable

नेस्टेड विवरण के लिए एक हल्का इनलाइन प्रकटीकरण — किसी फ़ील्ड की उप-प्रॉपर्टीज़ या एक वैकल्पिक टिप्पणी का विस्तार। title टॉगल को लेबल करता है (डिफ़ॉल्ट “Show more”) और किसी अकॉर्डियन आइटम के title की तरह इनलाइन Markdown रेंडर करता है; विस्तारित अवस्था में शुरू करने के लिए defaultOpen सेट करें।

<Expandable title="Show advanced options">
  These settings are optional and rarely need changing.
</Expandable>

Columns

कार्ड या ब्लॉक को समान चौड़ाई वाले कॉलमों के उत्तरदायी ग्रिड में व्यवस्थित करें जो मोबाइल पर पुनः प्रवाहित होता है। Columns में cols लिया जाता है; हर सेल को एक Column में लपेटें।

<Columns cols={2}>
  <Column>
    <Card title="Fast" icon="rocket">
      Built on Astro and Vite.
    </Card>
  </Column>
  <Column>
    <Card title="Themeable" icon="sun">
      Tailwind v4 design tokens.
    </Card>
  </Column>
</Columns>

CodeGroup

कई कोड ब्लॉक को एक टैब्ड स्विचर में समूहबद्ध करें — प्रति भाषा या फ़ाइल एक टैब। टैब लेबल हर ब्लॉक का शीर्षक होता है (भाषा के बाद वाला टेक्स्ट), या शीर्षक रहित ब्लॉक के लिए उसकी भाषा का नाम (TypeScript, Python), और समूह का कॉपी बटन टैब बार में स्थित होता है तथा वही ब्लॉक कॉपी करता है जो दिख रहा हो। टैब बार के बजाय मेन्यू से स्विच करने के लिए dropdown जोड़ें।

export const greet = (name: string) => `Hello, ${name}`;

def greet(name: str) -> str:
    return f"Hello, {name}"

fn greet(name: &str) -> String {
    format!("Hello, {name}")
}

<CodeGroup>

```ts TypeScript
export const greet = (name: string) => `Hello, ${name}`;
```

```python Python
def greet(name: str) -> str:
    return f"Hello, {name}"
```

```rust Rust
fn greet(name: &str) -> String {
    format!("Hello, {name}")
}
```

</CodeGroup>

Frame

किसी इमेज या किसी भी दृश्य को एक केंद्रित, बॉर्डर वाले फ़्रेम में लपेटें, जिसमें वैकल्पिक caption (Markdown के रूप में रेंडर) और hint हो।

<Frame
  caption="A **framed** illustration."
  hint="Frames center and caption visuals."
>
  <img src="/screenshot.png" alt="Product screenshot" />
</Frame>

YouTube

किसी YouTube वीडियो को एक उत्तरदायी, गोपनीयता-अनुकूल (youtube-nocookie.com) 16:9 फ़्रेम में एम्बेड करें जो कोई क्लाइंट JavaScript नहीं भेजता। एक वीडियो id या पूरा url पास करें, साथ ही एक वैकल्पिक title (सुलभता के लिए) और सेकंडों में start समय। एक प्लेलिस्ट url (youtube.com/playlist?list=… या youtube.com/embed/videoseries?list=…) पूरी प्लेलिस्ट एम्बेड करता है।

<YouTube id="aqz-KE-bpKQ" title="Big Buck Bunny" />
<YouTube url="https://youtu.be/aqz-KE-bpKQ" start={30} />

Color

कॉपी करने योग्य हेक्स मानों के साथ रंग स्वैच दिखाएँ — किसी पैलेट या ब्रांड रंगों को प्रलेखित करने के लिए उपयोगी। स्वैच सूची के लिए variant="compact" का उपयोग करें, या उन्हें समूहबद्ध करने के लिए Color.Row के साथ variant="table" का। हर Color.Item में एक name और एक value लिया जाता है (एक हेक्स स्ट्रिंग, या थीम-सजग रंगों के लिए { light, dark }); थीम-सजग स्वैच उस थीम का मान कॉपी करता है जिसे पाठक देख रहा है।

<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="green-500" value="#16A34A" />
  <Color.Item name="background" value={{ light: "#FFFFFF", dark: "#0A0A0A" }} />
</Color>

Tree

विस्तारित की जा सकने वाली फ़ोल्डरों के साथ एक श्रेणीबद्ध फ़ाइल/फ़ोल्डर संरचना रेंडर करें। (त्वरित, सूची-आधारित संस्करण के लिए फ़ाइल ट्री देखें; Tree प्रति-फ़ोल्डर नियंत्रण देता है।) Tree.Folder (name, वैकल्पिक defaultOpen, openable) और Tree.File (name) का उपयोग करें।

<Tree>
  <Tree.Folder name="src" defaultOpen>
    <Tree.File name="index.ts" />
    <Tree.Folder name="components">
      <Tree.File name="Button.tsx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="blume.config.ts" />
</Tree>

Panel

पूरक, अलग रखी गई सामग्री के लिए एक शीर्षक वाला कंटेनर। title वैकल्पिक है।

<Panel title="Good to know">
  Panels hold supporting detail without interrupting the main flow.
</Panel>

Tooltip

किसी इनलाइन शब्द के लिए होवर पर परिभाषा या संकेत प्रकट करें। tip होवर टेक्स्ट है; एक वैकल्पिक headline और आगे के लिंक हेतु cta + href जोड़ें।

अधिक जानने के लिए APIAPIA set of protocols software uses to communicate.Read the guide शब्द पर होवर करें।

Hover the <Tooltip tip="A set of protocols software uses to communicate." headline="API" cta="Read the guide" href="/docs/quickstart">API</Tooltip> term.

Tile

एक क्लिक करने योग्य प्रीव्यू जो शीर्षक और विवरण के ऊपर एक दृश्य — आइकन या इमेज — के साथ शुरू होता है। गैलरी और शोकेस के लिए उपयुक्त। इसमें title, description और href लिए जाते हैं; चाइल्ड दृश्य होता है।

<Tile
  title="Quickstart"
  description="Ship your first page in minutes."
  href="/docs/quickstart"
>
  <Icon icon="rocket" size={28} />
</Tile>

Prompt

एक लेबल और कॉपी बटन वाली एकल पंक्ति। description (Markdown) दृश्यमान लेबल है; बॉडी स्वयं प्रॉम्प्ट है — छिपी हुई, और Copy prompt बटन दबाने पर Markdown के रूप में, अपने लिंक, सूचियों और कोड को यथावत रखते हुए, क्लिपबोर्ड में कॉपी हो जाती है। इसके विराम चिह्न वैसे ही कॉपी होते हैं जैसे आपने उन्हें टाइप किया था: सीधे उद्धरण चिह्न, -- और ... जैसे लिखे गए हैं वैसे ही रहते हैं, हालाँकि पेज पर अन्यत्र गद्य उन्हें घुमावदार उद्धरण चिह्नों, डैश और एलिप्सिस के रूप में दिखाता है। actions बटनों को नियंत्रित करता है (उदा. ["copy", "cursor"])।

<Prompt
  description="Ask the model to **document** an endpoint."
  actions={["copy"]}
>
  Write reference docs for the POST /v1/pets endpoint.
</Prompt>

Visibility

दर्शकों के अनुसार सामग्री दिखाएँ या छिपाएँ। for="web" केवल साइट पर रेंडर होता है; for="agents" उस एजेंट-उन्मुख Markdown को लक्षित करता है जिसे AI एजेंट पढ़ते हैं (llms-full.txt और हर पेज का .md मिरर)।

<Visibility for="web">Shown on the site only.</Visibility>
<Visibility for="agents">Shown only in the generated Markdown.</Visibility>

टाइप टेबल

किसी ऑब्जेक्ट की प्रॉपर्टीज़ — उसके प्रॉप्स, टाइप और डिफ़ॉल्ट — को प्रलेखित करने के लिए टेबल। पंक्तियाँ TypeTable के साथ हाथ से लिखें, या AutoTypeTable के साथ सीधे किसी TypeScript इंटरफ़ेस या टाइप एलियास से उत्पन्न करें।

टाइप टेबल

एक Prop / Type ग्रिड जहाँ हर पंक्ति विस्तारित होकर अपना विवरण और ब्योरा प्रकट करती है। प्रॉपर्टी नाम से कुंजीबद्ध एक type मैप पास करें; हर प्रविष्टि में एक type, साथ ही वैकल्पिक description, default, required फ़्लैग, typeDescription और typeDescriptionLink लिया जाता है। वैकल्पिक प्रॉप्स (required सेट न होने पर) नाम के बाद ? दिखाते हैं।

<TypeTable
  type={{
    label: {
      type: "string",
      required: true,
      description: "The button's visible label.",
    },
    variant: {
      type: '"primary" | "ghost"',
      default: '"primary"',
      description: "Visual style.",
    },
    disabled: { type: "boolean" },
  }}
/>

ऑटो टाइप टेबल

किसी TypeScript टाइप से टाइप टेबल उत्पन्न करें ताकि दस्तावेज़ सोर्स के साथ समकालिक बने रहें। AutoTypeTable को path (आपके प्रोजेक्ट रूट से हल किया गया, यानी वह फ़ोल्डर जिसमें आप blume चलाते हैं) और एक टाइप name के साथ किसी फ़ाइल की ओर इंगित करें। विवरण JSDoc टिप्पणियों से आते हैं, डिफ़ॉल्ट @default टैग से, और वैकल्पिक प्रॉपर्टीज़ (?) को तदनुसार चिह्नित किया जाता है।

<AutoTypeTable path="./src/button.ts" name="ButtonProps" />

आप path के बजाय type के साथ टाइप को इनलाइन भी पास कर सकते हैं — छोटे उदाहरणों के लिए सुविधाजनक:

<AutoTypeTable
  name="ButtonProps"
  type={`
export interface ButtonProps {
  /** The button's visible label. */
  label: string;
  /**
   * Visual style.
   * @default "primary"
   */
  variant?: "primary" | "ghost";
  /** Disable interaction. */
  disabled?: boolean;
}
`}
/>

API फ़ील्ड

किसी एंडपॉइंट को हाथ से, एक बार में एक फ़ील्ड, प्रलेखित करने के लिए पंक्तियाँ, जिनकी स्टाइल उत्पन्न OpenAPI संदर्भ जैसी होती है। ParamField एक अनुरोध पैरामीटर है, जिसका नाम उस एट्रिब्यूट से दिया जाता है जो बताता है कि वह कहाँ जाता है: path, query, header, या body। ResponseField प्रतिक्रिया का एक फ़ील्ड है, जिसका नाम name से दिया जाता है। दोनों में एक type, required, deprecated और एक default लिया जाता है, और विवरण उनकी सामग्री के रूप में होता है; ResponseField में नाम के आसपास pre और post लेबल भी लिए जाते हैं।

<ParamField path="userId" type="string" required>
  The user's ID.
</ParamField>

<ParamField query="limit" type="integer" default={20}>
  How many results to return, up to 100.
</ParamField>

<ResponseField name="plan" type="string" post={["beta"]}>
  The user's plan.
</ResponseField>

किसी ऑब्जेक्ट के फ़ील्ड को एक Expandable के साथ उसके विवरण के भीतर नेस्ट करें:

<ResponseField name="address" type="object">
  Where the order ships.

  <Expandable title="properties">
    <ResponseField name="city" type="string" required>
      City name.
    </ResponseField>
  </Expandable>
</ResponseField>

api फ़्रंटमैटर वाले पेज पर, ParamField पेज का Try it पैनल और अनुरोध नमूने भी बनाते हैं: हाथ से लिखे गए API पेज देखें। ये फ़ील्ड Mintlify के समान नाम और प्रॉप्स का उपयोग करते हैं, इसलिए उसके लिए लिखे गए पेज यथावत रेंडर होते हैं। पेज की Markdown प्रति हर फ़ील्ड को उसके टाइप और फ़्लैग के साथ सूचीबद्ध करती है।

अनुरोध और प्रतिक्रिया उदाहरण

RequestExample और ResponseExample में कोड ब्लॉक होते हैं, हर शीर्षक वाले फ़ेंस के लिए एक टैब (dropdown एक भाषा मेन्यू पर स्विच करता है, जैसा CodeGroup पर होता है)। चौड़ी स्क्रीन पर वे पेज के बगल में एक कॉलम में पिन हो जाते हैं, अनुरोध प्रतिक्रिया के ऊपर, और पाठक के फ़ील्ड स्क्रॉल करते समय दृश्य में बने रहते हैं, ठीक वैसे ही जैसे किसी OpenAPI ऑपरेशन के उदाहरण करते हैं; जगह बनाने के लिए पेज अपनी विषय-सूची हटा देता है। संकरी स्क्रीन पर वे पेज की सामग्री के बाद आते हैं।

<RequestExample>

```bash cURL
curl --request POST https://api.acme.dev/v1/users \
  --header "Authorization: Bearer $ACME_TOKEN" \
  --data '{ "email": "ada@example.com" }'
```

```ts title="Acme SDK"
await acme.users.create({ email: "ada@example.com" });
```

</RequestExample>

<ResponseExample>

```json 201
{ "id": "usr_8f2k", "status": "invited" }
```

</ResponseExample>

इन्हें पेज के शीर्ष स्तर पर कहीं भी लिखें; हर एक कॉलम में चला जाता है। किसी अन्य घटक, जैसे किसी Tab, के भीतर नेस्ट किया गया उदाहरण वहीं रहता है जहाँ उसे लिखा गया है।

GitHub जानकारी

एक कार्ड जो किसी GitHub रिपॉज़िटरी से उसके स्टार और फ़ोर्क काउंट के साथ लिंक करता है। काउंट बिल्ड समय पर फ़ेच किए जाते हैं — कोई क्लाइंट JavaScript नहीं — इसलिए वे लाइव संख्याएँ नहीं, बल्कि आपके पिछले बिल्ड के समय की संख्याएँ दिखाते हैं; API अनुपलब्ध होने पर भी कार्ड उनके बिना रेंडर होता है। owner और repo पास करें, या अपने blume.config की रिपॉज़िटरी उपयोग करने के लिए उन्हें छोड़ दें। API दर सीमा हटाने के लिए एक GITHUB_TOKEN एनवायरनमेंट वेरिएबल सेट करें; एक token प्रॉप किसी एक कार्ड के लिए इसे ओवरराइड करता है, लेकिन एनवायरनमेंट वेरिएबल टोकन को आपकी सामग्री से बाहर रखता है।

कार्ड इंस्टेंस को github.host से पढ़ता है, इसलिए किसी Enterprise-होस्टेड साइट पर स्पष्ट owner/repo भी उसी इंस्टेंस को संबोधित करते हैं। किसी एक कार्ड को कहीं और इंगित करने के लिए host पास करें — मान लीजिए, किसी Enterprise साइट से कोई सार्वजनिक प्रोजेक्ट; REST बेस उससे उसी तरह व्युत्पन्न होता है जैसे github.host से होता है।

<!-- Uses the repo from blume.config -->
<GithubInfo />

<!-- Or point it at any repository -->
<GithubInfo owner="haydenbleasel" repo="blume" />

<!-- Or at a repository on another instance -->
<GithubInfo host="https://github.com" owner="haydenbleasel" repo="blume" />

Component

Component आपके प्रोजेक्ट की examples/ डायरेक्टरी से एक उदाहरण फ़ाइल को उसके हाइलाइट किए गए सोर्स के साथ-साथ लाइव प्रीव्यू के रूप में टैब में रेंडर करता है। इसे path के साथ किसी फ़ाइल की ओर इंगित करें — examples/ के अंतर्गत उसका स्थान, बिना एक्सटेंशन के (इसलिए examples/counter.tsx के लिए path="counter")। React, Vue, Svelte और Astro उदाहरण सभी समर्थित हैं; फ़्रेमवर्क उदाहरण हाइड्रेट होते हैं, Astro वाले स्थैतिक रूप से रेंडर होते हैं। यह एक ही फ़ाइल से प्रीव्यू और कोड को समकालिक रखता है। ऐसा path जो किसी भी उदाहरण का नाम नहीं देता, उसके स्थान पर एक “No example found” बॉक्स रेंडर करता है, और blume dev, blume build तथा blume doctor उसकी पंक्ति पर इसके बारे में चेतावनी (BLUME_EXAMPLE_NOT_FOUND) देते हैं।

प्रीव्यू एक पृथक फ़्रेम में रेंडर होता है जहाँ दस्तावेज़ की स्टाइल कभी नहीं पहुँचती — कोई गद्य मार्जिन, टाइपोग्राफ़ी, या थीम क्रोम आपके घटक में नहीं रिसता। फ़्रेम को Tailwind मिलता है (प्रीफ़्लाइट + आपके प्रोजेक्ट और आपकी उदाहरण डायरेक्टरी से स्कैन की गई यूटिलिटीज़), Blume के डिज़ाइन टोकन मिलते हैं ताकि bg-background जैसी क्लासेज़ डिफ़ॉल्ट रूप से साइट पैलेट का अनुसरण करें, और यह साइट के लाइट/डार्क टॉगल का लाइव अनुसरण करता है। पेन स्वयं को रेंडर किए गए उदाहरण के अनुसार आकार देता है — और लोड होने के बाद उदाहरण के बढ़ने या घटने पर भी उसे ट्रैक करता रहता है — जिसमें Preview और Code टैब एक ही ऊँचाई साझा करते हैं, इसलिए उन्हें बदलने पर पेज कभी नहीं खिसकता।

प्रीव्यू को अपने स्वयं के डिज़ाइन सिस्टम — मान लीजिए, shadcn वेरिएबल्स — से स्टाइल करने के लिए, examples.css को किसी स्टाइलशीट की ओर इंगित करें। इसे Blume के डिफ़ॉल्ट के बाद हर प्रीव्यू फ़्रेम में इंजेक्ट किया जाता है, इसलिए आपके टोकन जीतते हैं। इसमें @import "tailwindcss" न करें; फ़्रेम पहले से ही Tailwind प्रदान करता है। डार्क-मोड ओवरराइड के लिए .dark और [data-theme="dark"] दोनों काम करते हैं:

// blume.config.ts
export default defineConfig({
  examples: { css: "examples/theme.css" },
});

/* examples/theme.css */
:root {
  --primary: oklch(0.6 0.2 260);
}

.dark {
  --primary: oklch(0.75 0.15 260);
}

@theme inline {
  --color-primary: var(--primary);
}

डायरेक्टरी भी कॉन्फ़िगर करने योग्य है — जब आपके उदाहरण कहीं और रहते हों (उदा. रजिस्ट्री लेआउट) तो source सेट करें (या स्ट्रिंग शॉर्टहैंड, examples: "..." का उपयोग करें)। path हमेशा उसके सापेक्ष होता है:

// blume.config.ts
export default defineConfig({
  examples: "registry/files-sdk",
});

<!-- registry/files-sdk/file-list/basic.tsx -->
<Component path="file-list/basic" />

examples एक ग्लोब भी हो सकता है (कुछ भी जिसमें *, ?, [], {}, या ! हो)। केवल मेल खाने वाली फ़ाइलें खोजी जाती हैं, और path ग्लोब के स्थैतिक उपसर्ग (पहले वाइल्डकार्ड से पहले वाला भाग) के सापेक्ष होता है। यह ऐसी रजिस्ट्री के लिए है जो हर घटक के सोर्स को उसके उदाहरण के साथ रखती है — केवल उदाहरणों की ओर इंगित करें ताकि सोर्स, जिनमें प्रीव्यू के लिए कोई डिफ़ॉल्ट एक्सपोर्ट नहीं होता, शामिल न हो जाएँ:

// blume.config.ts
export default defineConfig({
  // registry/files-sdk/file-list/file-list.tsx — source, left out
  // registry/files-sdk/file-list/examples/basic.tsx — discovered
  examples: "registry/files-sdk/**/examples/*",
});

<!-- keyed relative to registry/files-sdk -->
<Component path="file-list/examples/basic" />

किसी मोनोरेपो में, आपके उदाहरण जिन घटकों को इम्पोर्ट करते हैं वे आमतौर पर किसी सहोदर वर्कस्पेस पैकेज में रहते हैं। Tailwind का @source फ़ाइलें स्कैन करता है, इम्पोर्ट नहीं: Blume आपके प्रोजेक्ट और examples डायरेक्टरी को स्कैन करता है (जहाँ भी source इंगित करता हो, प्रोजेक्ट के बाहर भी), इसलिए केवल उस सहोदर पैकेज के भीतर उपयोग की गई कोई क्लास तब तक उत्पन्न नहीं होती जब तक आप उस पैकेज को स्कैन में न जोड़ें। ऐसा examples.css (प्रीव्यू फ़्रेमों के लिए) या theme.css (साइट के लिए) में एक @source निर्देश के साथ करें, जो उस फ़ाइल के सापेक्ष लिखा जाए जिसमें वह स्थित है — यही मानक Tailwind नियम है — और Blume उसे उत्पन्न शीट में ले जाता है:

/* examples/theme.css */
@source "../../../packages/ui/src";

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <button
      className="rounded-blume border-border bg-background text-foreground hover:bg-muted border px-4 py-2 text-sm font-medium transition-colors"
      onClick={() => setCount((value) => value + 1)}
      type="button"
    >
      Clicked {count} {count === 1 ? "time" : "times"}
    </button>
  );
};

export default Counter;

<!-- examples/counter.tsx -->
<Component path="counter" />

एक Astro उदाहरण बिना किसी क्लाइंट JavaScript के लाइव रेंडर होता है:

---
interface Props {
  title?: string;
}

const { title = "Hello from Astro" } = Astro.props;
---

<div class="rounded-blume border border-border bg-muted/30 px-5 py-4">
  <p class="m-0 font-semibold text-foreground text-sm">{title}</p>
  <p class="m-0 mt-1 text-muted-foreground text-sm">
    A static, server-rendered example — no client JavaScript ships.
  </p>
</div>

CodeBlock

CodeBlock किसी कोड स्ट्रिंग को उन्हीं Shiki थीम और ट्रांसफ़ॉर्मर्स के साथ हाइलाइट करता है जो आपके फ़ेंस किए गए कोड के लिए उपयोग होते हैं — लाइट/डार्क स्वैप सहित — उन जगहों के लिए जहाँ फ़ेंस नहीं जा सकता, जैसे कोई लैंडिंग पेज या कस्टम घटक। code और एक lang पास करें:

export const greet = (name: string): string =>
`Hello, ${name}!`;

---
import CodeBlock from "blume/components/content/CodeBlock.astro";
---

<CodeBlock lang="ts" code={source} />

title हेडर लेबल सेट करता है — मान लीजिए, कोई फ़ाइल नाम — जो अन्यथा भाषा दिखाता है, और icons={false} भाषा का ब्रांड आइकन छिपा देता है, जैसा कि markdown.code.icons फ़ेंस के लिए करता है।

code के बिना, CodeBlock अपने चाइल्ड को वैसे ही रेंडर करता है जैसे वे लिखे गए हैं, इसलिए <CodeBlock>…</CodeBlock> में लिपटा कोई फ़ेंस किया गया ब्लॉक (जिस तरह Fern और Mintlify कोड लिखते हैं) उसी फ़ेंस के रूप में दिखता है। तब title और अन्य प्रॉप्स उस पर लागू नहीं होते: इसके बजाय फ़ेंस को भाषा के बाद उसका शीर्षक दें।

स्वयं HTML स्ट्रिंग में हाइलाइट करने के लिए (उदा. अपने स्वयं के घटक के भीतर), blume/markdown से अंतर्निहित हेल्पर इम्पोर्ट करें:

import { highlightCode } from "blume/markdown";

const html = await highlightCode(source, "ts");

Diff

Diff एक git-शैली का डिफ़ रेंडर करता है, जो आपके कोड ब्लॉक की तरह उसी Shiki थीम से हाइलाइट होता है और पूरी तरह बिल्ड समय पर तैयार होता है — कोई क्लाइंट JavaScript नहीं। इसे दो इनलाइन स्ट्रिंग (old / new), दो फ़ाइल पथ (before / after), या एक यूनिफ़ाइड पैच (एक इनलाइन patch स्ट्रिंग या एक src फ़ाइल) दें।

<Diff
  lang="ts"
  old={`export function greet(name) {
  return "Hi, " + name;
}`}
  new={`export function greet(name: string): string {
  return "Hi, " + name + "!";
}`}
/>

अपने प्रोजेक्ट की दो फ़ाइलों का डिफ़ लें, उसके रूट के सापेक्ष:

<Diff before="diffs/button-before.ts" after="diffs/button-after.ts" />

या एक यूनिफ़ाइड पैच रेंडर करें — या तो src के साथ किसी फ़ाइल से, या patch के साथ इनलाइन:

<Diff src="diffs/greet.patch" />

<Diff
  patch={`--- a/greet.ts
+++ b/greet.ts
@@ -1,3 +1,4 @@
-export function greet(name) {
-  return "Hi, " + name;
+export function greet(name: string): string {
+  const greeting = "Hi, " + name + "!";
+  return greeting;
 }`}
/>