Arcane Lexicon ships two component layers:

1. Rich markdown components available directly in .md files.
2. Dart layout components you can use when composing custom layouts.

Rich Markdown Components#

The following components are registered by default through KBRichMarkdownComponents.defaults().

Link Cards#

CardGroup + Card

<CardGroup cols={3}>
  <Card title="Quick Start" href="/guide/basics/installation" icon="rocket">
    Install and launch your docs app.
  </Card>
  <Card title="GitHub" href="https://github.com/ArcaneArts/arcane_lexicon" icon="github">
    External links show the external-link indicator.
  </Card>
</CardGroup>

Tiles + Tile

<Tiles cols={3}>
  <Tile title="Docs" href="/" icon="book">Internal navigation tile.</Tile>
  <Tile title="Discord" href="https://discord.gg/arcane" icon="message-circle">External support link.</Tile>
  <Tile title="Status" icon="activity">Tile without href acts as static content.</Tile>
</Tiles>

Layout Blocks#

Columns + Column

<Columns cols={2}>
  <Column>Left column content.</Column>
  <Column>Right column content.</Column>
</Columns>

Steps + Step

<Steps>
  <Step title="Install dependency">Add `arcane_lexicon` to `pubspec.yaml`.</Step>
  <Step title="Run dev server">Execute `jaspr serve`.</Step>
</Steps>

AccordionGroup + Accordion

<AccordionGroup>
  <Accordion title="Can this contain markdown?">Yes.</Accordion>
  <Accordion title="Can it start open?" defaultOpen={true}>Yes.</Accordion>
</AccordionGroup>

Expandable

<Expandable title="More details" defaultOpen={false}>
  Hidden content until expanded.
</Expandable>

Status and Content Wrappers#

Badge

<Badge color="info">Beta</Badge>
<Badge color="success">Stable</Badge>
<Badge color="warning">Preview</Badge>
<Badge color="danger">Breaking</Badge>

Beta Stable Preview Breaking

Banner

<Banner title="Deployment" href="/guide/basics/running" type="info">
  Review runtime and build commands.
</Banner>

Panel

<Panel title="Implementation Notes" icon="panel">
  Group related text with a titled wrapper.
</Panel>

Frame

<Frame label="Preview" caption="Optional caption text.">
  Content goes here.
</Frame>

Update

<Update label="Last updated" date="2026-03-03">
  Changelog summary.
</Update>

API and Data Display#

FieldGroup + ParamField + ResponseField

<FieldGroup>
  <ParamField query="page" type="number" required={true}>Page number.</ParamField>
  <ResponseField name="items" type="array">Returned items.</ResponseField>
</FieldGroup>

Tree + Tree.Folder + Tree.File

<Tree>
  <Tree.Folder name="content" defaultOpen={true}>
    <Tree.File name="index.md" />
    <Tree.File name="guide/installation.md" />
  </Tree.Folder>
</Tree>

• content

  • index.md
  • guide/installation.md

Color + Color.Item

<Color>
  <Color.Item label="Primary" value="#3b82f6" />
  <Color.Item label="Success" value="#22c55e" />
</Color>

View

<View title="Configuration Snapshot">
  Any markdown content can be wrapped.
</View>

Inline and Utility Components#

Tooltip

<Tooltip tip="Native tooltip text">Hover me</Tooltip>

Hover me

Icon

<Icon name="sparkles" size="sm" />

Kbd

Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to focus search.

Press ⌘ + K to focus search.

FilePath

Edit <FilePath>content/reference/components.md</FilePath> before rebuilding.

Edit content/reference/components.md before rebuilding.

Endpoint

<Endpoint method="GET" path="/api/docs/search-index.json" />
<Endpoint method="POST" path="/api/feedback/rating" />

ResourceGrid + Resource

<ResourceGrid cols={2}>
  <Resource title="Authoring Guide" href="/guide/basics/configuration" icon="book-open" label="Guide">
    Frontmatter, section config, and site config basics.
  </Resource>
  <Resource title="Sitemap Utility" href="/guide/advanced/sitemap" icon="globe" label="SEO">
    Build sitemap XML for production docs deployments.
  </Resource>
</ResourceGrid>

CodeGroup

<CodeGroup title="CLI">
```bash
jaspr serve
```
```bash
jaspr build --define=BASE_URL=/docs
```
</CodeGroup>

jaspr serve

jaspr build --define=BASE_URL=/docs

Callout Tag Components#

Callout tag components are available in addition to GitHub callout markdown syntax.

Supported tags:

• Note
• Tip
• Warning
• Info
• Check
• Caution
• Important

<Warning title="Java 21 Required">
  Use Java 21 or newer.
</Warning>

Tabs#

Tabs is provided via jaspr_content/components/tabs.dart and is included in defaults.

<Tabs defaultValue="one">
  <TabItem label="First" value="one">First tab content</TabItem>
  <TabItem label="Second" value="two">Second tab content</TabItem>
</Tabs>

Dart Layout Components#

These components are available for custom layout composition in Dart.

KBLayout#

Main page layout used when frontmatter sets layout: kb.

KBLayout(
  config: config,
  manifest: manifest,
  stylesheet: stylesheet,
)

KBPageNav#

Sequential previous/next navigation based on sorted visible pages.

• Global toggle: SiteConfig.pageNavEnabled
• Per-page override: frontmatter pageNav: true|false

KBPageNav(
  config: config,
  manifest: manifest,
  currentPath: '/guide/basics/installation',
)

KBSidebar + KBTopBar#

Navigation chrome components used by the default layout.

• navigationBarEnabled
• navigationBarPosition (top or bottom)

KBSidebar(
  config: config,
  manifest: manifest,
  currentPath: '/reference/components',
  showSearch: true,
  showThemeToggle: true,
)

KBTopBar(
  config: config,
  currentPath: '/reference/components',
  showThemeToggle: true,
)

KBRating#

Thumbs up/down rating block controlled by:

• SiteConfig.ratingEnabled
• SiteConfig.ratingPromptText
• SiteConfig.ratingThankYouText

KBRating(
  pagePath: '/reference/components',
  config: KBRatingConfig(
    promptText: config.ratingPromptText,
    thankYouText: config.ratingThankYouText,
  ),
)

KBChangelog#

Renderable timeline view for parsed changelog entries.

final ChangelogParser parser = ChangelogParser();
final List<ChangelogVersion> versions = parser.parse(changelogMarkdown);

KBChangelog(
  versions: versions,
  maxVersions: 5,
  githubUrl: config.githubUrl,
)

KBSubpages and KBRelatedPages#

Both are exported and available for custom layouts.

• KBSubpages shows children for the current section.
• KBRelatedPages computes similarity from shared tags.

These are not auto-injected by the default layout; use them explicitly in custom layout composition if needed.

KBSubpages(
  manifest: manifest,
  currentPath: '/guide',
)

KBRelatedPages(
  allPages: pages,
  currentPath: '/guide/basics/configuration',
)

DemoBuilder#

Use KnowledgeBaseApp.create(..., demoBuilder: ...) and page frontmatter component: ... to render live Dart components above markdown content.

KnowledgeBaseApp.create(
  config: config,
  stylesheet: stylesheet,
  demoBuilder: (String componentType) {
    if (componentType == 'ButtonDemo') {
      return Button(
        onPressed: () {},
        child: const Text('Demo'),
      );
    }
    return null;
  },
)