Components - Example Product | Fiskil Docs Guide Docs

Everything on this page can be copied straight into your own .mdx files. All components pick up your brand color from docs.json automatically.

Callouts

Five types, with shorthand tags for each:

Note

Neutral, informational context.

Tip

A helpful suggestion or best practice.

Warning

Something to be careful about.

Success

Confirmation that something worked.

Error

Something went wrong.

<Note title="Note">Neutral, informational context.</Note>
<Tip title="Tip">A helpful suggestion or best practice.</Tip>
<Warning title="Warning">Something to be careful about.</Warning>
<Check title="Success">Confirmation that something worked.</Check>
<Callout type="error" title="Error">Something went wrong.</Callout>

Cards

Link readers to related pages — with an optional description:

Quickstart

Set up in five minutes.

API reference

Generated from your OpenAPI file.

<CardGroup>
  <Card title="Quickstart" href="/example/guides/get-started/quickstart" description="Set up in five minutes." />
  <Card title="API reference" href="/example/api-reference" description="Generated from your OpenAPI file." />
</CardGroup>

Steps

For anything sequential:

Install

Get the dependencies in place.

Configure

Edit docs.json to match your brand.

Ship

Push and publish.

<Steps>
  <Step title="Install">Get the dependencies in place.</Step>
  <Step title="Configure">Edit `docs.json` to match your brand.</Step>
  <Step title="Ship">Push and publish.</Step>
</Steps>

Code

Fenced code blocks are syntax-highlighted with a copy button:

const client = new Client({ apiKey: process.env.API_KEY });
const result = await client.books.list({ limit: 10 });

Group language alternatives with code tabs — the reader's choice is remembered across the whole site:

curl https://api.example.com/v1/books -H "Authorization: Bearer $TOKEN"

Tabs

For non-code alternatives:

Install with brew install example.

Install with winget install example.

<Tabs items={['macOS', 'Windows']}>
  <Tab value="macOS">Install with `brew install example`.</Tab>
  <Tab value="Windows">Install with `winget install example`.</Tab>
</Tabs>

Accordions

Collapse detail readers may not need:

Can I nest Markdown inside?

Yes — accordions render full Markdown, including code, bold, and links.

Can one start open?

Yes — pass defaultOpen like this one does.

Field documentation

Document parameters and responses by hand when you need to:

idstringrequired

Unique identifier, prefixed with book_.

genreenum

One of fiction, nonfiction, technology, poetry.

Show nested attributes

identifier.typestring

Either isbn10 or isbn13.

Request & response examples

Wrap a code sample to label it as an example request or response — handy on pages that document an endpoint by hand:

Request

curl https://api.example.com/v1/books \
  -H "Authorization: Bearer $TOKEN"

Response

{ "id": "book_123", "title": "Dune", "genre": "fiction" }

On a generated API reference you don't need these — request and response examples come from your OpenAPI file. To add a prose note to a generated endpoint, use x-fiskil-notice (see OpenAPI).

Tables

Plan	Requests/min	Support
Free	60	Community
Pro	1,000	Email
Enterprise	Custom	Dedicated

Task lists

Write the docs
Brand the site from docs.json
Ship to readers

Diagrams

Mermaid diagrams render with your theme in light and dark mode:

<Mermaid chart={`sequenceDiagram
  participant App
  participant API
  App->>API: POST /books
  API-->>App: 201 Created`} />