Skip to content
Syndra

Authoring

Components

Every MDX component available in this template, with usage examples.

On this page

These components are available in every .mdx file under src/content/docs no imports needed. They live in src/components/mdx.

Callout

Highlight information the reader shouldn’t miss. Four types are available.

mdx
<Callout type="tip" title="Optional title">
  Content supports **Markdown**, `code` and [links](/).
</Callout>

Tabs

Group alternatives such as package managers or languages. Tabs with the same syncKey switch together and remember the reader’s choice.

ts
const doc = syndra.doc<Note>('notes/1');
mdx
<Tabs syncKey="lang">
  <TabItem label="TypeScript">
    ```ts
    const doc = syndra.doc<Note>('notes/1');
    ```
  </TabItem>
  <TabItem label="JavaScript">…</TabItem>
</Tabs>

Steps

Turn an ordered list into a numbered walkthrough.

  1. Install the package

    Run the install command for your package manager.

  2. Configure the client

    Add your project id and public key.

  3. Ship it

    Deploy and watch changes sync in real time.

mdx
<Steps>

1. **Install the package**

   Run the install command for your package manager.

2. **Configure the client**

</Steps>

Cards

Use cards for feature overviews or navigation. Add href to make the whole card a link, and icon to pick an icon from src/components/Icon.astro.

Static card

Cards without href are plain containers.

Link card

Cards with href lift on hover and link somewhere.

mdx
<CardGrid cols={3}>
  <Card title="Link card" icon="rocket" href="/getting-started/quickstart/">
    Cards with `href` link somewhere.
  </Card>
</CardGrid>

Accordion

Collapse secondary content like FAQs.

Can I nest components inside an accordion?

Yes, accordions accept any Markdown or MDX, including code and callouts.

Do accordions animate?

In browsers that support interpolate-size, they expand smoothly. Elsewhere they open instantly.

mdx
<Accordion title="Question" open>
  Answer.
</Accordion>

Badge

Inline status labels: Default Accent Stable Beta Deprecated

mdx
<Badge variant="success">Stable</Badge>

To show a badge next to a page in the sidebar, set badge in its frontmatter.