Fiskil Docs

Components

Every built-in component, demonstrated live on this page.

Components

Everything below works in any page with no imports. Each example renders live, followed by its source — this page is its own preview.

Callouts

Neutral context that shouldn't interrupt the flow.
A shortcut or best practice worth adopting.
Something that can break or surprise.
Confirmation that a step worked.
<Note>Neutral context that shouldn't interrupt the flow.</Note>
<Tip>A shortcut or best practice worth adopting.</Tip>
<Warning>Something that can break or surprise.</Warning>
<Check>Confirmation that a step worked.</Check>

The general form takes a type and optional title — types map to your status colors:

Request rejected

expiry_date must be in the future.

<Callout type="error" title="Request rejected">
  `expiry_date` must be in the future.
</Callout>

Cards

Quickstart

Zero to running site in five minutes.

External link

Links to other sites open in a new tab automatically.

<Cards>
  <Card title="Quickstart" description="Zero to running site in five minutes." href="/learn/guides/quickstart" />
  <Card title="External link" description="Links to other sites open in a new tab automatically." href="https://fiskil.com" />
</Cards>

Cards accepts cols={2} (default) or cols={3}; each Card takes title, description, href, and icon.

Steps

1

Install

Run npm install — numbering is automatic.
2

Configure

Edit docs.json.
3

Ship

Run fiskil publish.
<Steps>
<Step title="Install">Run `npm install` — numbering is automatic.</Step>
<Step title="Configure">Edit `docs.json`.</Step>
<Step title="Ship">Run `fiskil publish`.</Step>
</Steps>

Tabs

npm install @fiskil/docs
pnpm add @fiskil/docs
yarn add @fiskil/docs
<Tabs items={["npm", "pnpm", "yarn"]}>
<Tab value="npm">...</Tab>
<Tab value="pnpm">...</Tab>
<Tab value="yarn">...</Tab>
</Tabs>

Accordions

When should I use an accordion?

For genuinely optional detail — troubleshooting, edge cases, long examples — that would bloat the page if always visible.

Can one start open?

Yes — this one uses defaultOpen.

<AccordionGroup>
<Accordion title="When should I use an accordion?">...</Accordion>
<Accordion title="Can one start open?" defaultOpen>...</Accordion>
</AccordionGroup>

Field documentation

For hand-written API or config field docs:

amountintegerrequired

The amount in minor units — cents, pence — never floats.

metadataobject

Free-form key–value data returned unchanged in webhooks.

child attributes
metadata.order_idstring

Your internal order reference.

<ResponseField name="amount" type="integer" required>
  The amount in minor units — cents, pence — never floats.
</ResponseField>

<Expandable title="child attributes">
  <ResponseField name="metadata.order_id" type="string">...</ResponseField>
</Expandable>

Diagrams

The <Mermaid> component (globally available, no import) renders any Mermaid diagram and follows your theme in both light and dark mode — details in Diagrams.

Changelog entries

<Update> and <Updates> power release notes with deep links and tag filtering — they have their own page, and this site's changelog is a live example.

Want more?

Compose your own components from these primitives — see Custom components.

PagesCustom components