Files
shadcn-ui/apps/v4/examples
shadcn 18fcf0f766 feat: @shadcn/react (#11022)
* feat(@shadcn/react): add message-scroller package

Add the @shadcn/react headless primitives package with MessageScroller
scroll anchoring, streaming follow, history prepend, and jump-to-message
behavior. Includes geometry helpers, use-render utility, and unit,
browser, and perf tests.

* feat(registry): add chat components

Add MessageScroller, Message, Bubble, Attachment, and Marker registry
sources for base and radix, style variants, preview-03 chat blocks,
and registry index wiring.

* feat(v4): integrate chat components into docs site

Wire chat components into the v4 app with docs routes, example preview
pages, message part renderers, markdown support, registry build updates,
and supporting lib utilities.

* feat(examples): add chat component demos

Add base and radix example demos for MessageScroller, Message, Bubble,
Attachment, Marker, scroll-fade, and shimmer.

* docs: add chat component documentation

Add component and utility docs for the chat component set, update docs
navigation, and add the June 2026 chat components changelog entry.

* chore: regenerate registry JSON output

Rebuild public registry artifacts for all style variants with the new
chat components.

* chore(release): add @shadcn/react publish and CI pipeline

Add Changesets prerelease workflow, browser test job, RELEASING docs,
and monorepo wiring for publishing @shadcn/react independently from
the shadcn CLI.

* docs: fix display of component preview on mobile

* fix

* fix

* docs: add message scroller docs

* style: format

* fix
2026-06-26 21:19:31 +04:00
..
2026-06-26 21:19:31 +04:00
2026-06-26 21:19:31 +04:00
2026-06-26 21:19:31 +04:00
2026-03-26 14:36:00 +04:00

Examples

This directory contains demo components for the component documentation.

Directory Structure

examples
├── base
│   ├── button-demo.tsx
│   └── ...
├── radix
│   └── ...
└── __index__.tsx    # Auto-generated by registry:build

Adding a New Example

  1. Create a new .tsx file in examples/base or examples/radix:
// examples/base/button-loading.tsx
import { Button } from "@/styles/base-nova/ui/button"

export function ButtonLoading() {
  return <Button disabled>Loading...</Button>
}
  1. Run the registry build to regenerate the index:
pnpm --filter=v4 registry:build
  1. Use the example in documentation by referencing its name (filename without .tsx):
<ComponentPreview name="button-loading" />

Notes

  • Example files should be placed directly in examples/base or examples/radix, not in subdirectories.
  • Base examples should import from @/styles/base-nova/*. Radix examples should import from @/styles/radix-nova/*.
  • Both named exports and default exports are supported.
  • After adding or removing examples, run pnpm --filter=v4 registry:build to update the index.