# Components

Writedocs injects a standard set of components into every `.md`/`.mdx` file automatically — no `import` statements needed anywhere in your content.

Every component also accepts `className` (or `class`) with your own classes, added to the component's outermost element - for example `<Card className="featured">`. Style those classes in a [custom stylesheet](/docs/configuration/site-config/#custom-css-and-js--just-drop-the-file-in), or use Tailwind utility classes directly.

<CardGroup cols={2}>
  <Card title="Callout" href="/docs/content/components/callout/">
    Note, info, tip, warning, and danger boxes — plus a same-named shorthand for each.
  </Card>
  <Card title="Card and CardGroup" href="/docs/content/components/card/">
    Linkable cards with an icon, image, or HTTP-method badge, laid out in a grid.
  </Card>
  <Card title="Tabs and Tab" href="/docs/content/components/tabs/">
    A tabbed switcher for any block content.
  </Card>
  <Card title="CodeGroup" href="/docs/content/components/code-group/">
    Multiple fenced code blocks as a tab strip or dropdown switcher.
  </Card>
  <Card title="RequestExample and ResponseExample" href="/docs/content/components/request-response-example/">
    Code examples pinned in the right sidebar instead of inline.
  </Card>
  <Card title="Accordion and AccordionGroup" href="/docs/content/components/accordion/">
    Collapsible rows, united under one shared border.
  </Card>
  <Card title="Steps and Step" href="/docs/content/components/steps/">
    A numbered, connected sequence of instructions.
  </Card>
  <Card title="Hint" href="/docs/content/components/hint/">
    An inline, dotted-underline tooltip for a short aside.
  </Card>
  <Card title="Image" href="/docs/content/components/image/">
    A centered, size-constrained image with optional dark-mode variant and caption card.
  </Card>
  <Card title="Frame" href="/docs/content/components/frame/">
    A bordered, rounded card around any existing markup.
  </Card>
  <Card title="Video" href="/docs/content/components/video/">
    A native `<video>` or embed `<iframe>`, auto-detected from `src`.
  </Card>
  <Card title="Parameter and Expandable" href="/docs/content/components/parameter/">
    The name/type/description row used throughout API reference content.
  </Card>
  <Card title="Searchbar" href="/docs/content/components/searchbar/">
    A live text filter wrapped around a table or other content.
  </Card>
  <Card title="Badge" href="/docs/content/components/badge/">
    A small inline label for status indicators, version tags, or metadata.
  </Card>
  <Card title="Icon" href="/docs/content/components/icon/">
    An inline icon or custom image, plus how every `icon` string across `writedocs.json` resolves.
  </Card>
  <Card title="Update" href="/docs/content/components/update/">
    Changelog entries with a label, description, and tag filters.
  </Card>
  <Card title="Tree" href="/docs/content/components/tree/">
    A file and folder tree with collapsible folders.
  </Card>
  <Card title="Tile" href="/docs/content/components/tile/">
    A preview image on a patterned background, with a title and description.
  </Card>
  <Card title="Panel" href="/docs/content/components/panel/">
    Content pinned to the right-hand column, in place of the table of contents.
  </Card>
  <Card title="Prompt" href="/docs/content/components/prompt/">
    A ready-made AI prompt readers can copy or open in Cursor.
  </Card>
  <Card title="View" href="/docs/content/components/view/">
    Alternative versions of the same content, with one switcher for the page.
  </Card>
  <Card title="Color" href="/docs/content/components/color/">
    Color swatches with click-to-copy values.
  </Card>
  <Card title="GitHub repository" href="/docs/content/components/github/">
    A card linking to a public GitHub repository.
  </Card>
  <Card title="Visibility" href="/docs/content/components/visibility/">
    Content for people on the site, or for AI agents reading its Markdown.
  </Card>
</CardGroup>

## Plain Markdown still works

Every component above is additive — regular Markdown syntax (lists, tables, blockquotes, links, bold/italic, inline `code`) works exactly as you'd expect with no component wrapper needed. See [Code blocks](/docs/content/code-blocks/) for what fenced (` ``` `) blocks specifically support beyond plain syntax highlighting.