Components

Lito comes with a set of built-in components to make your documentation richer. These are available globally in all .mdx files — no imports needed.

Card

A simple card component for links or highlights.

<Card title="Getting Started" icon="🚀" href="/getting-started/installation">
  Learn how to install and configure Lito.
</Card>

🚀

Getting Started

Learn how to install and configure Lito.

Prop	Type	Description
`title`	`string`	The card title.
`icon`	`string`	Icon or emoji (optional). Supports Iconify names (e.g. `lucide:rocket`).
`href`	`string`	URL to link to (optional). Makes the card clickable.
`target`	`string`	Link target (e.g. `_blank`). External links (`http...`) automatically open in a new tab.

CardGroup

A layout component to display Cards in a responsive grid.

<CardGroup>
  <Card title="Installation" icon="📦" href="/getting-started/installation">
    Get up and running quickly.
  </Card>
  <Card title="Configuration" icon="⚙️" href="/reference/configuration">
    Customize your docs site.
  </Card>
</CardGroup>

📦

Installation

Get up and running quickly.

⚙️

Configuration

Customize your docs site.

Tabs

Organize content into switchable tabs.

<Tabs>
  <Tab title="npm">
    npm install lito
  </Tab>
  <Tab title="yarn">
    yarn add lito
  </Tab>
  <Tab title="pnpm">
    pnpm add lito
  </Tab>
</Tabs>

npm install @litodocs/cli

yarn add @litodocs/cli

pnpm add @litodocs/cli

Accordion

Collapsible content sections for FAQs or optional details.

<Accordion title="What is Lito?" icon="❓">
  Lito is an open-source documentation generator built on Astro.
</Accordion>

<Accordion title="Is Lito free?" defaultOpen>
  Yes! Lito is completely free and open-source.
</Accordion>

❓ What is Lito?

Lito is an open-source documentation generator built on Astro.

Is Lito free?

Yes! Lito is completely free and open-source.

Prop	Type	Default	Description
`title`	`string`	-	The accordion header text.
`icon`	`string`	-	Optional icon/emoji.
`defaultOpen`	`boolean`	`false`	Whether the accordion starts expanded.

Steps

Display numbered step-by-step instructions.

<Steps>
  <Step title="Install Lito">
    Run `npx @litodocs/cli dev -i ./my-docs` to create a new project.
  </Step>
  <Step title="Configure">
    Edit the `docs-config.json` file to customize your site.
  </Step>
  <Step title="Deploy">
    Push to GitHub and deploy with Vercel or Netlify.
  </Step>
</Steps>

Install Lito

Run npx @litodocs/cli dev -i ./my-docs to create a new project.

Configure

Edit the docs-config.json file to customize your site.

Deploy

Push to GitHub and deploy with Vercel or Netlify.

Component	Prop	Type	Description
`Steps`	-	-	Container for Step items.
`Step`	`title`	`string`	Optional step title.

Callout

Enhanced alerts/admonitions with different types.

<Callout type="note" title="Note">
  This is a note callout with helpful information.
</Callout>

<Callout type="tip">
  Pro tip: Use callouts to highlight important info!
</Callout>

<Callout type="warning" title="Warning">
  Be careful with this operation.
</Callout>

Note

This is a note callout with helpful information.

Tip

Pro tip: Use callouts to highlight important info!

Warning

Be careful with this operation.

Danger

This is a danger callout for critical warnings.

Prop	Type	Options	Description
`type`	`string`	`note`, `tip`, `info`, `warning`, `danger`, `check`	The callout type.
`title`	`string`	-	Override the default title.
`icon`	`string`	-	Override the default icon.

CodeGroup

Tabbed code blocks for showing code in multiple languages. Use the title attribute on code blocks to set tab names.

<CodeGroup>
  ```bash title="npm"
  npm install @litodocs/cli
  ```
  ```bash title="yarn"
  yarn add lito
  ```
</CodeGroup>

Tip

Add title="Tab Name" to your code blocks to customize the tab labels.

Badge

Inline status badges for labeling content.

<Badge>Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Deprecated</Badge>
<Badge variant="info">Beta</Badge>

Default Success Warning Deprecated Beta

Prop	Type	Options	Description
`variant`	`string`	`default`, `success`, `warning`, `danger`, `info`	Badge color variant.

Hover tooltips for additional context.

The <Tooltip content="Application Programming Interface">API</Tooltip> is well documented.

The API Application Programming Interface is well documented.

Prop	Type	Description
`content`	`string`	The tooltip text shown on hover.

Frame

A styled container for images or videos with optional captions.

<Frame caption="Architecture diagram">
  <img src="/architecture.png" alt="Architecture" />
</Frame>

Prop	Type	Description
`caption`	`string`	Caption text displayed below the content.

Columns

Create multi-column layouts.

<Columns cols={2}>
  <Column>
    **Left Column**

    Content for the left side.
  </Column>
  <Column>
    **Right Column**

    Content for the right side.
  </Column>
</Columns>

Left Column

Content for the left side.

Right Column

Content for the right side.

Component	Prop	Type	Options	Description
`Columns`	`cols`	`number`	`2`, `3`, `4`	Number of columns (default: 2).
`Column`	-	-	-	Individual column container.

GitHub-Style Alerts

Lito also supports GitHub-style blockquote alerts:

> [!NOTE]
> This is a note.

> [!TIP]
> This is a helpful tip.

> [!IMPORTANT]
> Critical information here.

> [!WARNING]
> Be careful!

> [!CAUTION]
> Potential danger ahead.

Note

This is a note.

Tip

This is a helpful tip.

Important

Critical information here.

Warning

Be careful!

Caution

Potential danger ahead.

Icon

Display icons from multiple icon sets powered by Iconify. Available globally in all MDX files.

Basic Usage

<Icon name="lucide:rocket" />
<Icon name="heroicons:home" size={24} />
<Icon name="mdi:github" class="text-primary-500" />

lucide:rocket

heroicons:home

mdi:github

fa6-brands:twitter

Available Icon Sets

Icon Set	Prefix	Description
Lucide	`lucide:`	Clean, consistent stroke icons (recommended)
Heroicons	`heroicons:`	Beautiful hand-crafted icons by Tailwind
Material Design Icons	`mdi:`	Google’s Material Design icon set
Font Awesome Solid	`fa6-solid:`	Font Awesome 6 solid icons
Font Awesome Brands	`fa6-brands:`	Font Awesome 6 brand icons

Props

Prop	Type	Default	Description
`name`	`string`	-	Icon name in `set:icon-name` format.
`size`	`number \| string`	`24`	Icon width and height in pixels.
`class`	`string`	-	Additional CSS classes.
`aria-hidden`	`boolean`	`true`	Hide from screen readers.

Sidebar groups automatically get icons based on their label. You can also specify custom icons in your navigation config:

Group Label	Default Icon
Getting Started	`lucide:rocket`
Introduction	`lucide:book-open`
Guides	`lucide:compass`
Concepts	`lucide:lightbulb`
Reference	`lucide:file-code`
API	`lucide:code`
Components	`lucide:puzzle`
Examples	`lucide:folder-open`
Tutorials	`lucide:graduation-cap`
Configuration	`lucide:settings`
Deployment	`lucide:cloud-upload`
Troubleshooting	`lucide:bug`
FAQ	`lucide:help-circle`
Changelog	`lucide:history`
Resources	`lucide:library`

Finding Icons

Browse all available icons at icon-sets.iconify.design. Search for any icon, then use it with the format set-name:icon-name.

LinkCard

A compact card designed for single-link references. Shows an optional icon, title, description, and a directional arrow.

<LinkCard title="Getting Started" href="/getting-started/installation" description="Learn how to install and set up Lito" />

<LinkCard title="GitHub Repository" href="https://github.com/Lito-docs/cli" icon="fa6-brands:github" description="View the source code" />

Getting Started Learn how to install and set up Lito

GitHub Repository View the source code

Prop	Type	Description
`title`	`string`	Card title (required).
`href`	`string`	Link URL (required).
`description`	`string`	Optional description text.
`icon`	`string`	Iconify icon name or emoji (optional).

FileTree

Display file and folder structures with syntax highlighting and interactive expand/collapse.

<FileTree highlight="src,package.json">
- src/
  - components/
    - Header.astro
    - Footer.astro
  - pages/
    - index.astro
- package.json
- astro.config.mjs
</FileTree>

src/
- components/
  - Header.astro
  - Footer.astro
- pages/
  - index.astro
package.json
astro.config.mjs

Syntax rules:

Each line starts with -
Folders end with / — they become expandable
Use 2-space indentation for nesting
Highlighted items appear in bold with your primary color

Prop	Type	Description
`highlight`	`string`	Comma-separated file/folder names to highlight.

Image

An enhanced image component with lazy loading, captions, and responsive sizing.

<Image
  src="/screenshot.png"
  alt="Dashboard screenshot"
  caption="The admin dashboard"
  width={800}
/>

Prop	Type	Description
`src`	`string`	Image source URL (required).
`alt`	`string`	Alt text for accessibility (required).
`caption`	`string`	Caption displayed below the image.
`width`	`number`	Image width in pixels.
`height`	`number`	Image height in pixels.
`class`	`string`	Additional CSS classes.

Tip

The Image component automatically applies lazy loading and async decoding for better performance.

YouTube

Embed YouTube videos directly in your documentation. Powered by astro-embed.

<YouTube id="dQw4w9WgXcQ" />

Prop	Type	Description
`id`	`string`	YouTube video ID (required).

Changelog Components

Document release history with structured changelog entries.

<Changelog>
  <ChangelogEntry version="2.1.0" date="2026-02-20">
    <ChangelogItem type="added">FileTree component for displaying file structures</ChangelogItem>
    <ChangelogItem type="added">Image component with lazy loading</ChangelogItem>
    <ChangelogItem type="fixed">Card external link detection</ChangelogItem>
    <ChangelogItem type="deprecated">Legacy Alert syntax</ChangelogItem>
  </ChangelogEntry>
</Changelog>

Component	Prop	Type	Description
`Changelog`	-	-	Container for changelog entries.
`ChangelogEntry`	`version`	`string`	Version number.
`ChangelogEntry`	`date`	`string`	Release date.
`ChangelogItem`	`type`	`string`	Change type: `added`, `fixed`, `changed`, `deprecated`, `removed`.

API Documentation Components

For documenting APIs, see the dedicated API Reference page which covers:

APIEndpoint - Display API endpoints with method badges
APIPlayground - Interactive API testing
ParamTable / Param - Parameter documentation
ResponseField - Response field documentation
RequestExample / ResponseExample - Code examples for requests and responses

Last updated: March 2, 2026

4 min read

Edit this page

Was this page helpful?

Lito docs

Components

Card

Getting Started

CardGroup

Installation

Configuration

Tabs

Accordion

Steps

Install Lito

Configure

Deploy

Callout

CodeGroup

Badge

Tooltip

Frame

Columns

GitHub-Style Alerts

Icon

Basic Usage

Available Icon Sets

Props

Sidebar Icons

Finding Icons

LinkCard

FileTree

Image

YouTube

Changelog Components

API Documentation Components