HeroUI Demo

This page mounts HeroUI inside Starlight so you can verify the integration in a real docs route.

Live React islandHeroUI 3

Live preview

HeroUI is active

This card is a React island rendered inside Starlight.

React + Astro

Keep Starlight pages server-rendered, then mount HeroUI components where interactive UI is actually needed.

Form controls

Save draftPreview

Tabs

Design

Content

Delivery

Define the UI language first, then compose docs around real product flows.

Interactive patterns

Dropdowns and modals work inside the same React island.

Open actions

Open modal

import { Button } from "@heroui/react/button";
import { Input } from "@heroui/react/input";
import { Tab, TabList, TabPanel, Tabs } from "@heroui/react/tabs";

How it is used

Why this page is MDX

Starlight Markdown pages cannot render React components directly. Use MDX when you want to embed HeroUI islands.

MDX usage

import HeroUIDemo from '../../../components/HeroUIDemo';

<HeroUIDemo client:load />

Stable import pattern

Import HeroUI components from subpaths instead of the root bundle:

React component imports

import { Button } from '@heroui/react/button';
import { Card } from '@heroui/react/card';
import { Chip } from '@heroui/react/chip';
import { Avatar } from '@heroui/react/avatar';
import { ProgressBar } from '@heroui/react/progress-bar';
import { Switch } from '@heroui/react/switch';