Components · Specistry Docs

NoteRules for every component

Block-level only: blank line before and after each tag and around its content. Props are plain string attributes. Names are case-sensitive. Nesting stops at six levels.

<Callout>
<Steps>
<Step>
<Cards>
<Card>
<Tabs>
<Tab>
<CodeGroup>
<Hero>
<Action>
<Media>
<Install>
<StartHere>
<Entry>

Callout

type is note, tip, warning or danger; title is optional. Callouts cannot contain callouts.

docs/x.mdx

<Callout type="warning" title="Keep keys out of the browser">

API keys are secrets. Use them from CI and servers only.

</Callout>

Steps

Only Step children, each with a title. Steps can hold code and callouts.

docs/x.mdx

<Steps>

<Step title="Create an inbox">

Every test gets its own address.

</Step>

</Steps>

Cards

docs/x.mdx

<Cards>

<Card title="Quickstart" href="./quickstart" description="First email in five minutes." />

<Card title="API reference" href="/api" />

</Cards>

Tabs

Unique labels. Without JavaScript every panel renders in order; with it, an accessible tab list. Tabs cannot nest.

docs/x.mdx

<Tabs>

<Tab label="TypeScript">

```typescript
const client = new TestInbox({ apiKey });
```

</Tab>

<Tab label="Python">

```python
client = TestInbox(api_key=key)
```

</Tab>

</Tabs>

Edge cases

Expression as a prop

CONTENT_EXPRESSION_FORBIDDEN

✕ FAILS

docs/x.mdx

<Callout type={kind}>

✓ FIX

docs/x.mdx

<Callout type="tip">

Props are strings only.

Lowercase or unknown tag

CONTENT_HTML_FORBIDDEN · CONTENT_COMPONENT_UNKNOWN

✕ FAILS

docs/x.mdx

<callout type="tip">
<Warning>

✓ FIX

docs/x.mdx

<Callout type="warning">

Lowercase is HTML; unknown capitalised tags are not in the vocabulary.

No blank lines

Parsed as inline

✕ FAILS

docs/x.mdx

<Callout type="tip">Short tip</Callout>

✓ FIX

docs/x.mdx

<Callout type="tip">

Short tip

</Callout>

Components are block-level.