---
title: Components
description: Importable React components exposed by Geistdocs for application UI and documentation experiences
type: overview
summary: Browse every component subpath exported by Geistdocs. These components can be imported into application code without relying on the default MDX component map.
url: /docs/components/index
source: apps/template/content/docs/components/index.mdx
related:
  - /docs/syntax
  - /docs/packages
---

# Components

Geistdocs exports reusable React components for application UI, custom documentation layouts, and authored content. Import from the package variant selected by your project:

```tsx
import { Button } from "@vercel/geistdocs/components/button";
```

Internal projects using `@vercel/geistdocs-private` use the same component subpaths. The private package resolves primitives through Geistcn; the public package provides public equivalents.

| Component | Import subpath | Purpose |
| --- | --- | --- |
| [Badge](/docs/components/badge) | `components/badge` | Compact status and category labels |
| [Button](/docs/components/button) | `components/button` | Buttons and link-style actions |
| [Input](/docs/components/input) | `components/input` | Text input fields with provider-backed styling |
| [Toggle](/docs/components/toggle) | `components/toggle` | Controlled boolean controls |
| [Tooltip](/docs/components/tooltip) | `components/tooltip` | Contextual hover and focus labels |
| [Toast](/docs/components/toast) | `components/toasts` | Global success, warning, and error notifications |
| [Theme Switcher](/docs/components/theme-switcher) | `components/theme-switcher` | System, light, and dark theme selection |
| [Tabs](/docs/components/tabs) | `components/tabs`, `components/tabs-with-children` | Tab navigation and mounted content panels |
| [Collapsible](/docs/components/collapsible) | `components/collapsible` | Expandable content regions |
| [Details](/docs/components/details) | `components/details` | Styled native disclosure elements |
| [Dialog](/docs/components/dialog) | `components/dialog` | Modal search, chat, forms, and confirmations |
| [Callout](/docs/components/callout) | `components/callout` | Notices with optional titles and descriptions |
| [Code Block](/docs/components/code-block) | `components/code-block`, `components/code-block-tabs` | Highlighted code and tabbed code groups |
| [Command Prompt](/docs/components/command-prompt) | `components/command-prompt` | Command surfaces with copy support and alternatives |
| [Copy Prompt](/docs/components/copy-prompt) | `components/copy-prompt` | Copyable prompts for agents and language models |
| [Dropdown Menu](/docs/components/dropdown-menu) | `components/dropdown-menu` | Accessible action menus |
| [Navigation Menu](/docs/components/navigation-menu) | `components/navigation-menu` | Accessible navigation flyouts |
| [Popover](/docs/components/popover) | `components/popover` | Anchored floating content |
| [Scroll Area](/docs/components/scroll-area) | `components/scroll-area` | Styled overflow regions and scrollbars |
| [Image](/docs/components/image) | `components/image` | Next.js images with optional light and dark sources |
| [Native Link](/docs/components/link) | `components/link` | Styled anchors using browser-native navigation |
| [Mermaid](/docs/components/mermaid) | `components/mermaid` | Mermaid diagram rendering |
| [Video](/docs/components/video) | `components/video` | Responsive video playback |
| [Steps](/docs/components/steps) | `components/steps` | Numbered procedural content |

Components such as `Button`, `Callout`, `CodeBlock`, and `Steps` are also included in the default MDX component map. Importing them directly is useful in React components, layouts, and custom page renderers.