# Component docs with tabs, accordions, and code blocks

[Open the live Fudge conversation](https://design.withfudge.com/share/component-docs-tabs-accordions-code-blocks)

Last updated: 2026-07-28

The accidental prototype tried to render custom `docs-tabs` and `docs-accordion` blocks. We do not need a special renderer for that. The useful product answer is simpler: component docs should put examples, code, and optional detail in a clear scan path.

Useful patterns:

1. Use tabs for equivalent variants: frameworks, platforms, examples, or states.
2. Use accordions for optional depth: props, accessibility, migration notes, and edge cases.
3. Keep code blocks close to the claim they prove.
4. Do not hide the primary setup path behind a disclosure control.

## Captured pages

[![Exa | Web Search API, AI Search Engine, & Website Crawler](https://pin.fontofweb.com/9592?format=jpg)](https://design.withfudge.com/share/pin-9592)

[Exa | Web Search API, AI Search Engine, & Website Crawler](https://design.withfudge.com/share/pin-9592)

[![Codex | AI Coding Partner from OpenAI](https://pin.fontofweb.com/9656?format=jpg)](https://design.withfudge.com/share/pin-9656)

[Codex | AI Coding Partner from OpenAI](https://design.withfudge.com/share/pin-9656)

[![Agentic Infrastructure](https://pin.fontofweb.com/9710?format=jpg)](https://design.withfudge.com/share/pin-9710)

[Agentic Infrastructure](https://design.withfudge.com/share/pin-9710)

[![Components | HeroUI Pro](https://pin.fontofweb.com/825?format=jpg)](https://design.withfudge.com/share/pin-825)

[Components | HeroUI Pro](https://design.withfudge.com/share/pin-825)

[![CodePen](https://pin.fontofweb.com/8423?format=jpg)](https://design.withfudge.com/share/pin-8423)

[CodePen](https://design.withfudge.com/share/pin-8423)