Docs usage snippets

[kawaijoe]

Describe the changes

• Add usage snippet component
• Clerk style TOC
• Improved formatting of MDX renderer
• Shorten animation speed
• Modified the generator so that highlights are 0 indexed

Checklist

• I have read the CONTRIBUTING.md.
• I have included the relevant unit/golden tests.
• I have included the relevant samples.
• I have updated the documentation accordingly.
• I have added the required flutters_hook for widget controllers.
• I have updated the CHANGELOG.md if necessary.

[Copilot]

Pull request overview

Adds a reusable “usage snippet” UI to the docs site and updates the Dart snippet generator + docs pages to render usage sections from generated JSON (with improved MDX formatting and some UI polish).

Changes:

• Introduce UsageSnippet component (category toggles + per-category line highlighting + copy button) and wire it into many MDX pages.
• Refactor code snippet rendering/copy behavior and tweak MDX list/table styling + docs page TOC styling.
• Update the Dart snippet generator to emit 0-indexed highlight ranges and reorganize many usage snippet sources accordingly.

Reviewed changes

Copilot reviewed 106 out of 107 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
docs_snippets/tool/snippet_generator/snippet.dart	Switch highlight ranges to 0-indexed inclusive.
docs_snippets/lib/usages/widgets/tooltip.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/toast.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/time_picker.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/time_field.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/tile_group.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/tile.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/text_form_field.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/text_field.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/tabs.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/switch.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/slider.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/sidebar.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/select_tile_group.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/select_menu_tile.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/select_group.dart	Reorder usage categories/blocks and fix semantics label text.
docs_snippets/lib/usages/widgets/select.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/resizable.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/radio.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/popover_menu.dart	Reorder usage categories/blocks and fix menu item usage split.
docs_snippets/lib/usages/widgets/popover.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/picker.dart	Reorder usage categories/blocks and split wheel vs builder.
docs_snippets/lib/usages/widgets/persistent_sheet.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/pagination.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/multi_select.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/modal_sheet.dart	Reorder usage categories/blocks and split show vs route.
docs_snippets/lib/usages/widgets/line_calendar.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/item_group.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/item.dart	Reorder usage categories/blocks and split examples.
docs_snippets/lib/usages/widgets/dialog.dart	Reorder usage categories/blocks and split show vs constructors.
docs_snippets/lib/usages/widgets/date_field.dart	Reorder usage categories/blocks and split constructors.
docs_snippets/lib/usages/widgets/checkbox.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/calendar.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/button.dart	Reorder usage categories/blocks and split constructors.
docs_snippets/lib/usages/widgets/breadcrumb.dart	Reorder usage categories/blocks and split constructors.
docs_snippets/lib/usages/widgets/bottom_navigation_bar.dart	Reorder usage categories/blocks and split item.
docs_snippets/lib/usages/widgets/avatar.dart	Reorder usage categories/blocks.
docs_snippets/lib/usages/widgets/autocomplete.dart	Reorder usage categories/blocks and split builder.
docs_snippets/lib/usages/widgets/accordion.dart	Reorder usage categories/blocks and split item.
docs_snippets/lib/usages/foundation/tappable.dart	Reorder usage categories/blocks and normalize focused outline color usage.
docs_snippets/lib/usages/foundation/portal.dart	Reorder usage categories/blocks.
docs_snippets/lib/snippets/themes/customization/main.dart	Remove an extra blank line in snippet header.
docs/package.json	Add radix-ui dependency.
docs/pnpm-lock.yaml	Lockfile updates for radix-ui dependency.
docs/mdx-components.tsx	Add MDX list/table element overrides for spacing.
docs/app/global.css	Add --default-transition-duration.
docs/app/docs/[[...slug]]/page.tsx	Switch TOC style to “clerk” and adjust typography classes.
docs/components/ui/copy-button.tsx	New reusable copy-to-clipboard button.
docs/components/code-snippet/code-snippet.tsx	Use CopyButton instead of inline copy logic.
docs/components/code-snippet/code-renderer.tsx	Preserve snippet whitespace; support per-line classes for category highlighting.
docs/components/ui/dropdown-menu.tsx	Adjust radio item layout/indicator visuals.
docs/components/usage-snippet/usage-snippet.tsx	New client component to render usage snippets with category toggles.
docs/components/usage-snippet/types.ts	Types for usage snippet JSON format.
docs/components/usage-snippet/colors.ts	Category color palette helpers.
docs/components/usage-snippet/category-controls.tsx	UI for toggling/selecting category variants.
docs/components/usage-snippet/assemble.ts	Assemble final snippet text + shifted annotations + category line mapping.
docs/content/docs/tile/tile.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/tile/tile-group.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/tile/select-tile-group.mdx	Replace inline code blocks with <UsageSnippet /> and add additional usage sections.
docs/content/docs/tile/select-menu-tile.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/overlay/tooltip.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/overlay/toast.mdx	Replace inline code blocks with <UsageSnippet /> and add toaster usage.
docs/content/docs/overlay/sheet.mdx	Replace inline code blocks with <UsageSnippet /> and add route usage.
docs/content/docs/overlay/popover.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/overlay/popover-menu.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/overlay/persistent-sheet.mdx	Replace inline code blocks with <UsageSnippet /> and add FSheets usage.
docs/content/docs/overlay/dialog.mdx	Replace inline code blocks with <UsageSnippet /> and add constructor usages.
docs/content/docs/navigation/tabs.mdx	Replace inline code blocks with <UsageSnippet /> and add FTabEntry usage.
docs/content/docs/navigation/sidebar.mdx	Replace inline code blocks with <UsageSnippet /> and add item/group usages.
docs/content/docs/navigation/pagination.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/navigation/header.mdx	Replace inline code blocks with <UsageSnippet /> and add nested usage.
docs/content/docs/navigation/breadcrumb.mdx	Replace inline code blocks with <UsageSnippet /> and add item/collapsed variants.
docs/content/docs/navigation/bottom-navigation-bar.mdx	Replace inline code blocks with <UsageSnippet /> and add item usage.
docs/content/docs/layout/scaffold.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/layout/resizable.mdx	Replace inline code blocks with <UsageSnippet /> and add region usage.
docs/content/docs/layout/divider.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/foundation/tappable.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/foundation/portal.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/foundation/focused-outline.mdx	Add a Usage section using <UsageSnippet />.
docs/content/docs/foundation/collapsible.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/form/time-picker.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/form/time-field.mdx	Replace inline code blocks with <UsageSnippet /> and add picker usage.
docs/content/docs/form/text-form-field.mdx	Replace inline code blocks with <UsageSnippet /> and add variants.
docs/content/docs/form/text-field.mdx	Replace inline code blocks with <UsageSnippet /> and add variants.
docs/content/docs/form/switch.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/form/slider.mdx	Replace inline code blocks with <UsageSnippet /> and add mark usage.
docs/content/docs/form/select.mdx	Replace inline code blocks with <UsageSnippet /> and add variants.
docs/content/docs/form/select-group.mdx	Replace inline code blocks with <UsageSnippet /> and add item mixin usages.
docs/content/docs/form/radio.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/form/picker.mdx	Replace inline code blocks with <UsageSnippet /> and add wheel usages.
docs/content/docs/form/multi-select.mdx	Replace inline code blocks with <UsageSnippet /> and add variants.
docs/content/docs/form/label.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/form/date-field.mdx	Replace inline code blocks with <UsageSnippet /> and add constructor variants.
docs/content/docs/form/checkbox.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/form/button.mdx	Replace inline code blocks with <UsageSnippet /> and add icon/raw usages.
docs/content/docs/form/autocomplete.mdx	Replace inline code blocks with <UsageSnippet /> and add builder usage.
docs/content/docs/feedback/progress.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/feedback/determinate-progress.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/feedback/circular-progress.mdx	Replace inline code blocks with <UsageSnippet /> and add variants.
docs/content/docs/feedback/alert.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/data/line-calendar.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/data/item.mdx	Replace inline code blocks with <UsageSnippet /> and add raw usage.
docs/content/docs/data/item-group.mdx	Replace inline code blocks with <UsageSnippet /> and add variants.
docs/content/docs/data/card.mdx	Replace inline code blocks with <UsageSnippet /> and add raw usage.
docs/content/docs/data/calendar.mdx	Replace inline code blocks with <UsageSnippet />.
docs/content/docs/data/badge.mdx	Replace inline code blocks with <UsageSnippet /> and add raw usage.
docs/content/docs/data/avatar.mdx	Replace inline code blocks with <UsageSnippet /> and add raw usage.
docs/content/docs/data/accordion.mdx	Replace inline code blocks with <UsageSnippet /> and add item usage.

Files not reviewed (1)

• docs/pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[auto-maid]

Documentation Preview

Latest Commit SHA	3890e41
Preview URL	https://e1aa29b5-forui-docs-dev.duobase.workers.dev/docs

You're seeing this because the docs/samples were updated.

[Pante]

• Banner image in https://77356ceb-forui-docs-dev.duobase.workers.dev/docs is outdated.

Is it possible to change the background color of the popover in dark mode? The text on almost pure black is quite hard on my eyes. Maybe something similar to the background?

• The text is horizontally overflowing outside of the popover. The popover also vertically overflows out of the viewport for especially long popovers. We might want to make the popover scrollable.

[Pante]

The clipping seems to be off.

[Pante]

Perhaps we can format the title in the popover similar to the body? Also it isn't immediately apparent that it is a link that can be clicked too.