About
Breadcrumbs display a hierarchy of links to the current page or resource in an application. Breadcrumbs provide a list of links to parent pages of the current page in hierarchical order. Breadcrumbs helps implement these in an accessible way.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breadcrumbs [react-aria-components] to your project and fits it to your theme.
Code
How Breadcrumbs [react-aria-components] is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import {
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
Breadcrumbs,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumbs"
function BreadcrumbsDemo() {
return (
<Breadcrumbs>
<BreadcrumbItem>
<BreadcrumbLink href="/home">Home</BreadcrumbLink>
<BreadcrumbSeparator />
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
<BreadcrumbSeparator />
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumbs</BreadcrumbPage>
</BreadcrumbItem>
</Breadcrumbs>
)
}
export { BreadcrumbsDemo }
![Breadcrumbs [react-aria-components] preview](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=1080,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/breadcrumbs/default/preview.png)
![Tag Group [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/tag-group/891/preview.png)
![Date Range Picker [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/date-range-picker/default/preview.png)
![Grid List [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/grid-list/default/preview.png)
![Switch [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/switch/1023/preview.png)
![Select [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/select/864/preview.png)
![Range Calendar [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/range-calendar/default/preview.png)

![Slider [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/slider/827/preview.png)







