Custom Icon
}} />`}
-/>
-
-## Icon library
-
-
-
+ {children}
+
+
+
+ {children}
+
+ 
-
-Every component has a unique prefix `.bui-` followed by the component name. Component props
-are represented using the `data-` attribute. That way, class names are easily identifiable.
-
-## Available CSS variables
-
-### Base colors
+## Base colors
These colors are used for special purposes like ring, scrollbar, ...
@@ -123,7 +184,7 @@ These colors are used for special purposes like ring, scrollbar, ...
-### Core background colors
+## Core background colors
These colors are used for the background of your application. We are mostly using for now a
single elevated background for panels. `--bui-bg` should mostly use as the main background
@@ -224,9 +285,9 @@ color of your app.
-### Foreground colors
+## Foreground colors
-Foreground colours are meant to work in pair with a background colours. Typeically this would work
+Foreground colours are meant to work in pair with a background colours. Typically this would work
for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors
are prefixed with `fg` to make it easier to identify.
@@ -329,7 +390,7 @@ are prefixed with `fg` to make it easier to identify.
-### Border colors
+## Border colors
These border colors are mostly meant to be used as borders on top of any components with
low contrast to help as a separator with the different background colors.
@@ -391,7 +452,7 @@ low contrast to help as a separator with the different background colors.
-### Special colors
+## Special colors
These colors are used for special purposes like ring, scrollbar, ...
@@ -424,7 +485,7 @@ These colors are used for special purposes like ring, scrollbar, ...
-### Font families
+## Font families
We have two fonts that we use across Backstage UI. The first one is the sans-serif
font that we use for the body of the application. The second one is the
@@ -446,14 +507,14 @@ monospace font that we use for code blocks and tables.
$1');
+}
+
export const CodeBlockClient = ({
out,
title,
@@ -16,7 +20,7 @@ export const CodeBlockClient = ({
{title && (
diff --git a/docs-ui/src/components/CustomTheme/styles.module.css b/docs-ui/src/components/CustomTheme/styles.module.css
index 05604c48be..dddd3ff7e4 100644
--- a/docs-ui/src/components/CustomTheme/styles.module.css
+++ b/docs-ui/src/components/CustomTheme/styles.module.css
@@ -5,7 +5,7 @@
right: 16px;
width: 240px;
height: 47px;
- background-color: var(--panel);
+ background-color: var(--bg);
border-radius: 0.375rem;
border: 1px solid var(--border);
display: flex;
@@ -33,7 +33,7 @@
height: 46px;
flex-shrink: 0;
border-bottom: 1px solid var(--border);
- background-color: var(--panel);
+ background-color: var(--bg);
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/docs-ui/src/components/HeadlessBanners/styles.module.css b/docs-ui/src/components/HeadlessBanners/styles.module.css
index 384327c394..c0066eccff 100644
--- a/docs-ui/src/components/HeadlessBanners/styles.module.css
+++ b/docs-ui/src/components/HeadlessBanners/styles.module.css
@@ -1,6 +1,6 @@
.container {
display: flex;
- background-color: var(--panel);
+ background-color: var(--bg);
padding: 1.5rem;
border-radius: 0.25rem;
border: 1px solid var(--border);
diff --git a/docs-ui/src/components/IconLibrary/IconLibrary.tsx b/docs-ui/src/components/IconLibrary/IconLibrary.tsx
deleted file mode 100644
index bad51e62bf..0000000000
--- a/docs-ui/src/components/IconLibrary/IconLibrary.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client';
-
-import { Text, Icon, icons } from '../../../../packages/ui';
-import type { IconNames } from '../../../../packages/ui';
-import styles from './styles.module.css';
-
-export const IconLibrary = () => {
- const list = Object.keys(icons);
-
- return (
-
- {title}
+ {parse(parseMarkdownInlineCode(title))}
)}
{parse(out)}
diff --git a/docs-ui/src/components/CodeBlock/index.tsx b/docs-ui/src/components/CodeBlock/index.tsx
index 4c0fe72960..1467bca465 100644
--- a/docs-ui/src/components/CodeBlock/index.tsx
+++ b/docs-ui/src/components/CodeBlock/index.tsx
@@ -1,4 +1,5 @@
import type { BundledLanguage } from 'shiki';
+import { transformerNotationDiff } from '@shikijs/transformers';
import { codeToHtml } from 'shiki';
import { CodeBlockClient } from './client';
@@ -8,14 +9,24 @@ export interface CodeBlockProps {
code?: string;
}
-export async function CodeBlock({ lang = 'tsx', title, code }: CodeBlockProps) {
- const out = await codeToHtml(code || '', {
- lang: lang,
+export async function CodeBlock(props: CodeBlockProps) {
+ const { lang = 'tsx', title, code } = props;
+ let out = await codeToHtml(code || '', {
+ lang,
+ transformers: [transformerNotationDiff({ matchAlgorithm: 'v3' })],
themes: {
- light: 'min-light',
+ light: 'github-dark',
dark: 'min-dark',
},
});
+ // Remove background-color from the pre tag to use our theme colors
+ out = out.replace(
+ /style="([^"]*?)background-color:[^;]+;?([^"]*?)"/g,
+ 'style="$1$2"',
+ );
+ // Clean up empty style attributes
+ out = out.replace(/style=""\s?/g, '');
+
return
- {list.map(icon => (
-
- );
-};
diff --git a/docs-ui/src/components/IconLibrary/index.ts b/docs-ui/src/components/IconLibrary/index.ts
deleted file mode 100644
index b21b4511d3..0000000000
--- a/docs-ui/src/components/IconLibrary/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { IconLibrary } from './IconLibrary';
diff --git a/docs-ui/src/components/IconLibrary/styles.module.css b/docs-ui/src/components/IconLibrary/styles.module.css
deleted file mode 100644
index c9f317ef6a..0000000000
--- a/docs-ui/src/components/IconLibrary/styles.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.library {
- display: grid;
- grid-template-columns: repeat(6, 1fr);
- gap: 1rem;
-}
-
-.item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 8px;
-}
-
-.icon {
- display: flex;
- width: 100%;
- justify-content: center;
- align-items: center;
- height: 80px;
- border-radius: 0.5rem;
- border: 1px solid var(--border);
- background-color: var(--panel);
- transition: background-color 0.2s ease-in-out;
-
- &:hover {
- background-color: var(--surface-1);
- }
-}
diff --git a/docs-ui/src/components/LayoutComponents/LayoutComponents.module.css b/docs-ui/src/components/LayoutComponents/LayoutComponents.module.css
index a09a04fb5c..9009cdb6a4 100644
--- a/docs-ui/src/components/LayoutComponents/LayoutComponents.module.css
+++ b/docs-ui/src/components/LayoutComponents/LayoutComponents.module.css
@@ -19,7 +19,7 @@
& .content {
flex: none;
- background-color: var(--panel);
+ background-color: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
width: 100%;
diff --git a/docs-ui/src/components/MobileBottomNav/AnimatedMenuIcon.module.css b/docs-ui/src/components/MobileBottomNav/AnimatedMenuIcon.module.css
new file mode 100644
index 0000000000..632f005b65
--- /dev/null
+++ b/docs-ui/src/components/MobileBottomNav/AnimatedMenuIcon.module.css
@@ -0,0 +1,40 @@
+.icon {
+ display: block;
+}
+
+.topLine,
+.middleLine,
+.bottomLine {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Menu state (default) */
+.topLine {
+ transform-origin: 10px 5px;
+ transform: rotate(0deg);
+}
+
+.middleLine {
+ opacity: 1;
+ transform-origin: 10px 10px;
+}
+
+.bottomLine {
+ transform-origin: 10px 15px;
+ transform: rotate(0deg);
+}
+
+/* Close state (when open) */
+.icon[data-open='true'] .topLine {
+ transform-origin: 10px 5px;
+ transform: translateY(5px) rotate(45deg);
+}
+
+.icon[data-open='true'] .middleLine {
+ opacity: 0;
+}
+
+.icon[data-open='true'] .bottomLine {
+ transform-origin: 10px 15px;
+ transform: translateY(-5px) rotate(-45deg);
+}
diff --git a/docs-ui/src/components/MobileBottomNav/AnimatedMenuIcon.tsx b/docs-ui/src/components/MobileBottomNav/AnimatedMenuIcon.tsx
new file mode 100644
index 0000000000..80edd64d43
--- /dev/null
+++ b/docs-ui/src/components/MobileBottomNav/AnimatedMenuIcon.tsx
@@ -0,0 +1,56 @@
+import styles from './AnimatedMenuIcon.module.css';
+
+interface AnimatedMenuIconProps {
+ isOpen: boolean;
+ size?: number;
+}
+
+export const AnimatedMenuIcon = ({
+ isOpen,
+ size = 20,
+}: AnimatedMenuIconProps) => {
+ return (
+
+ );
+};
diff --git a/docs-ui/src/components/MobileBottomNav/MobileBottomNav.module.css b/docs-ui/src/components/MobileBottomNav/MobileBottomNav.module.css
new file mode 100644
index 0000000000..9c128c3959
--- /dev/null
+++ b/docs-ui/src/components/MobileBottomNav/MobileBottomNav.module.css
@@ -0,0 +1,205 @@
+/* Mobile Bottom Navigation Island */
+.mobileBottomNav {
+ display: block;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 16px;
+ z-index: 300;
+ pointer-events: none;
+
+ @media (min-width: 768px) {
+ display: none;
+ }
+}
+
+.island {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin: 0 auto;
+ width: 50vw;
+ padding: 8px 12px 8px 12px;
+ border-radius: 32px;
+ pointer-events: auto;
+ background-color: #000;
+}
+
+:global([data-theme-mode='dark']) .island {
+ background-color: #fff;
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.menuButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 8px;
+ border-radius: 50%;
+ transition: background-color 0.2s ease-in-out;
+
+ /* White icons on light mode (black island) */
+ color: white;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+}
+
+:global([data-theme-mode='dark']) .menuButton {
+ /* Black icons on dark mode (white island) */
+ color: black;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+}
+
+.buttonGroup {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 4px;
+ border-radius: 24px;
+ background-color: rgba(255, 255, 255, 0.2);
+}
+
+:global([data-theme-mode='dark']) .buttonGroup {
+ background-color: rgba(0, 0, 0, 0.08);
+}
+
+.buttonGroup button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 6px 12px;
+ border-radius: 20px;
+ transition: background-color 0.2s ease-in-out;
+
+ /* White icons on light mode */
+ color: white;
+
+ &[data-selected] {
+ background-color: rgba(255, 255, 255, 0.2);
+ }
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.15);
+ }
+}
+
+:global([data-theme-mode='dark']) .buttonGroup button {
+ /* Black icons on dark mode */
+ color: black;
+
+ &[data-selected] {
+ background-color: rgba(0, 0, 0, 0.2);
+ }
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.15);
+ }
+}
+
+/* Mobile Menu Bottom Sheet */
+.overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 200;
+ background-color: rgba(38, 38, 38, 0.7);
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+
+ &[data-entering] {
+ animation: overlayFadeIn 200ms ease-out;
+ }
+
+ &[data-exiting] {
+ animation: overlayFadeOut 200ms ease-in;
+ }
+}
+
+@keyframes overlayFadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes overlayFadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+.modal {
+ width: calc(100% - 48px);
+ max-height: 50vh;
+ background-color: var(--bg);
+ border-radius: 16px;
+ box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
+ display: flex;
+ flex-direction: column;
+ outline: none;
+ margin-bottom: 96px;
+
+ &[data-entering] {
+ animation: slideUp 300ms cubic-bezier(0.32, 0.72, 0, 1);
+ }
+
+ &[data-exiting] {
+ animation: slideDown 200ms cubic-bezier(0.32, 0.72, 0, 1);
+ }
+}
+
+@keyframes slideUp {
+ from {
+ transform: translateY(8%);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideDown {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(8%);
+ }
+}
+
+.dialog {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ max-height: 70vh;
+ outline: none;
+ overflow: hidden;
+}
+
+.menuContent {
+ flex: 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-height: 0;
+}
diff --git a/docs-ui/src/components/MobileBottomNav/MobileBottomNav.tsx b/docs-ui/src/components/MobileBottomNav/MobileBottomNav.tsx
new file mode 100644
index 0000000000..52ec2ee9d9
--- /dev/null
+++ b/docs-ui/src/components/MobileBottomNav/MobileBottomNav.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { useState } from 'react';
+import { RiMoonLine, RiSunLine } from '@remixicon/react';
+import { Button, ToggleButton, ToggleButtonGroup } from 'react-aria-components';
+import styles from './MobileBottomNav.module.css';
+import { usePlayground } from '@/utils/playground-context';
+import { MobileMenu } from './MobileMenu';
+import { AnimatedMenuIcon } from './AnimatedMenuIcon';
+
+export const MobileBottomNav = () => {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const { selectedTheme, setSelectedTheme } = usePlayground();
+
+ return (
+ <>
+
- {icon}
-
- ))}
-
-
-
+
+
+
+
+
+
+
+
+
+
+ {section.title}
+
+ {section.content.map(item => {
+ const isActive = pathname === `${section.url}/${item.slug}`;
+
+ return (
+
+ {item.title}
+
+ {item.status === 'alpha' && 'Alpha'}
+ {item.status === 'beta' && 'Beta'}
+ {item.status === 'inProgress' && 'In Progress'}
+ {item.status === 'stable' && 'Stable'}
+ {item.status === 'deprecated' && 'Deprecated'}
+
+
+ );
+ })}
+
- >({
{Object.keys(data).map(n => {
const enumValues =
- data[n].values === 'icon'
- ? Object.keys(icons).map(icon => {icon} )
- : Array.isArray(data[n].values) &&
- data[n].values.map(t => {t} );
+ Array.isArray(data[n].values) &&
+ data[n].values.map(t => {t} );
return (
diff --git a/docs-ui/src/components/PropsTable/TypePopup.module.css b/docs-ui/src/components/PropsTable/TypePopup.module.css
index f8240566c7..b1423a7e4a 100644
--- a/docs-ui/src/components/PropsTable/TypePopup.module.css
+++ b/docs-ui/src/components/PropsTable/TypePopup.module.css
@@ -25,7 +25,7 @@
border: 1px solid var(--border);
box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
border-radius: 6px;
- background: var(--panel);
+ background: var(--bg);
color: var(--primary);
outline: none;
/* max-width: 400px; */
@@ -43,7 +43,7 @@
.arrow svg {
display: block;
- fill: var(--panel);
+ fill: var(--bg);
stroke: var(--border);
stroke-width: 1px;
transform: rotate(180deg);
diff --git a/docs-ui/src/components/Toolbar/Logo.tsx b/docs-ui/src/components/Sidebar/Logo.tsx
similarity index 100%
rename from docs-ui/src/components/Toolbar/Logo.tsx
rename to docs-ui/src/components/Sidebar/Logo.tsx
diff --git a/docs-ui/src/components/Sidebar/Sidebar.module.css b/docs-ui/src/components/Sidebar/Sidebar.module.css
index 75ac541d9f..83c1e0bde5 100644
--- a/docs-ui/src/components/Sidebar/Sidebar.module.css
+++ b/docs-ui/src/components/Sidebar/Sidebar.module.css
@@ -6,17 +6,24 @@
.sidebar {
display: block;
position: fixed;
- top: 112px;
+ top: 0;
left: 0;
- width: 332px;
- height: calc(100vh - 112px);
+ width: 260px;
+ height: 100vh;
color: var(--primary);
overflow: hidden;
}
}
+.logoContainer {
+ height: 80px;
+ display: flex;
+ align-items: center;
+ padding-left: 32px;
+}
+
.root {
- height: 100%;
+ height: calc(100% - 80px);
}
.scrollbar {
@@ -56,67 +63,13 @@
}
.content {
- padding: 0 20px 64px;
+ padding: 32px 20px 64px;
}
.menu {
- display: flex;
- flex-direction: row;
- position: relative;
-}
-
-.section {
width: 100%;
display: flex;
flex-direction: column;
gap: 2px;
-}
-
-.sectionTitle {
- font-size: 0.6875rem;
- font-weight: 500;
- padding: 0 12px 4px;
- color: var(--secondary);
- margin-top: 40px;
- text-transform: uppercase;
-
- &:first-child {
- margin-top: 12px;
- }
-}
-
-.line {
- text-decoration: none;
- align-items: center;
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- height: 26px;
- padding: 0 12px;
- border-radius: 4px;
-
- &:hover {
- background-color: var(--action);
- }
-}
-
-.line.active {
- background-color: var(--action);
-}
-
-.line.active .lineTitle {
- color: var(--primary);
-}
-
-.lineTitle {
- font-size: 14px;
- font-weight: 400;
- color: var(--primary);
-}
-
-.lineStatus {
- font-size: 14px;
- color: var(--secondary);
+ position: relative;
}
diff --git a/docs-ui/src/components/Sidebar/Sidebar.tsx b/docs-ui/src/components/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000000..d9c16f1905
--- /dev/null
+++ b/docs-ui/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import styles from './Sidebar.module.css';
+import { ScrollArea } from '@base-ui-components/react/scroll-area';
+import { Logo } from './Logo';
+import { Navigation } from '@/components/Navigation';
+
+export const Sidebar = () => {
+ return (
+
-
- );
-};
diff --git a/docs-ui/src/components/Table/styles.module.css b/docs-ui/src/components/Table/styles.module.css
index 5a5ebab450..8f38ac6979 100644
--- a/docs-ui/src/components/Table/styles.module.css
+++ b/docs-ui/src/components/Table/styles.module.css
@@ -17,7 +17,7 @@
padding: 12px 16px !important;
border: none !important;
text-align: left;
- background-color: var(--panel) !important;
+ background-color: var(--bg) !important;
font-size: 16px;
& p {
diff --git a/docs-ui/src/components/TableOfContents/TableOfContents.module.css b/docs-ui/src/components/TableOfContents/TableOfContents.module.css
new file mode 100644
index 0000000000..7275c24520
--- /dev/null
+++ b/docs-ui/src/components/TableOfContents/TableOfContents.module.css
@@ -0,0 +1,93 @@
+.container {
+ position: sticky;
+ top: 24px;
+ max-height: calc(100vh - 48px);
+ overflow-y: auto;
+ padding: 16px 0;
+}
+
+.list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ position: relative;
+}
+
+.list::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 2px;
+ background-color: var(--border);
+}
+
+.indicator {
+ position: absolute;
+ left: 0;
+ width: 2px;
+ background-color: var(--primary);
+ transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+ height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ pointer-events: none;
+ z-index: 1;
+}
+
+.item {
+ position: relative;
+ margin: 0;
+}
+
+.itemNested {
+ padding-left: 16px;
+}
+
+.link {
+ display: block;
+ width: 100%;
+ text-align: left;
+ background: none;
+ border: none;
+ padding: 6px 16px;
+ font-size: 0.875rem;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: color 0.2s ease;
+ line-height: 1.4;
+ position: relative;
+}
+
+.link:hover {
+ color: var(--text);
+}
+
+.itemActive .link {
+ color: var(--primary);
+ font-weight: 500;
+}
+
+/* Hide scrollbar for webkit browsers */
+.container::-webkit-scrollbar {
+ width: 4px;
+}
+
+.container::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.container::-webkit-scrollbar-thumb {
+ background: var(--border);
+ border-radius: 2px;
+}
+
+.container::-webkit-scrollbar-thumb:hover {
+ background: var(--text-secondary);
+}
+
+/* Responsive: hide on smaller screens */
+@media (max-width: 1280px) {
+ .container {
+ display: none;
+ }
+}
diff --git a/docs-ui/src/components/TableOfContents/TableOfContents.tsx b/docs-ui/src/components/TableOfContents/TableOfContents.tsx
new file mode 100644
index 0000000000..d18265415b
--- /dev/null
+++ b/docs-ui/src/components/TableOfContents/TableOfContents.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import styles from './TableOfContents.module.css';
+
+interface Heading {
+ id: string;
+ text: string;
+ level: number;
+}
+
+export function TableOfContents() {
+ const [headings, setHeadings] = useState([]);
+ const [activeId, setActiveId] = useState('');
+ const [indicatorTop, setIndicatorTop] = useState(0);
+ const [indicatorHeight, setIndicatorHeight] = useState(0);
+ const pathname = usePathname();
+
+ useEffect(() => {
+ // Extract all H2 and H3 headings from the document
+ const elements = Array.from(
+ document.querySelectorAll('h2[id], h3[id]'),
+ ) as HTMLHeadingElement[];
+
+ const headingData: Heading[] = elements.map(element => ({
+ id: element.id,
+ text: (element.textContent || '').replace('#', '').trim(),
+ level: parseInt(element.tagName.substring(1)),
+ }));
+
+ setHeadings(headingData);
+
+ // Set initial active heading (first visible heading or first heading)
+ if (headingData.length > 0) {
+ const viewportTop = window.scrollY + 100; // offset for header
+ const visibleHeading = elements.find(element => {
+ const rect = element.getBoundingClientRect();
+ return rect.top + window.scrollY >= viewportTop - 200;
+ });
+ setActiveId(visibleHeading?.id || headingData[0].id);
+ }
+
+ // Set up IntersectionObserver to track visible headings
+ const observerOptions = {
+ rootMargin: '-80px 0px -80% 0px',
+ threshold: 1,
+ };
+
+ const observerCallback = (entries: IntersectionObserverEntry[]) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ setActiveId(entry.target.id);
+ }
+ });
+ };
+
+ const observer = new IntersectionObserver(
+ observerCallback,
+ observerOptions,
+ );
+
+ elements.forEach(element => observer.observe(element));
+
+ return () => {
+ elements.forEach(element => observer.unobserve(element));
+ };
+ }, [pathname]);
+
+ // Update indicator position when activeId changes
+ useEffect(() => {
+ if (activeId) {
+ const activeElement = document.querySelector(
+ `[data-toc-id="${activeId}"]`,
+ ) as HTMLElement;
+ if (activeElement) {
+ const list = activeElement.closest('ul');
+ if (list) {
+ const listRect = list.getBoundingClientRect();
+ const elementRect = activeElement.getBoundingClientRect();
+ setIndicatorTop(elementRect.top - listRect.top);
+ setIndicatorHeight(elementRect.height);
+ }
+ }
+ }
+ }, [activeId, headings]);
+
+ const handleClick = (id: string) => {
+ const element = document.getElementById(id);
+ if (element) {
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ // Update URL without scrolling (already handled above)
+ window.history.pushState(null, '', `#${id}`);
+ }
+ };
+
+ if (headings.length === 0) {
+ return null;
+ }
+
+ return (
+
+ );
+}
diff --git a/docs-ui/src/components/TableOfContents/index.ts b/docs-ui/src/components/TableOfContents/index.ts
new file mode 100644
index 0000000000..ffe4593ca7
--- /dev/null
+++ b/docs-ui/src/components/TableOfContents/index.ts
@@ -0,0 +1 @@
+export { TableOfContents } from './TableOfContents';
diff --git a/docs-ui/src/components/Toolbar/Toolbar.module.css b/docs-ui/src/components/Toolbar/Toolbar.module.css
index f0e58f2edb..581fc599b3 100644
--- a/docs-ui/src/components/Toolbar/Toolbar.module.css
+++ b/docs-ui/src/components/Toolbar/Toolbar.module.css
@@ -1,76 +1,77 @@
.toolbar {
- position: fixed;
display: flex;
- top: 0;
- left: 32px;
- right: 32px;
- height: 112px;
- z-index: 10;
+ height: 80px;
align-items: center;
justify-content: space-between;
- padding-left: 0.25rem;
-}
+ margin-bottom: 24px;
-.left {
- /* width: 296px; */
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding-right: 20px;
-}
-
-.right {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: flex-end;
-}
-
-.actions {
- display: none;
-}
-
-.version {
- display: none;
-}
-
-.versionLinks {
- display: flex;
- align-items: center;
-
- a {
- width: 48px;
- height: 48px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--secondary);
- transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
- border-radius: 48px;
-
- &:hover {
- color: var(--primary);
- background-color: var(--action);
- }
- }
-}
-
-@media (min-width: 600px) {
- .actions {
- display: flex;
- align-items: center;
- gap: 1rem;
- }
-}
-
-@media (min-width: 768px) {
- .toolbar {
+ @media (min-width: 768px) {
right: 40px;
}
}
+.breadcrumb {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+}
+
+.logoMobile {
+ display: block;
+
+ @media (min-width: 768px) {
+ display: none;
+ }
+}
+
+.breadcrumbDesktop {
+ display: none;
+
+ @media (min-width: 768px) {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+}
+
+.breadcrumbLink {
+ color: var(--secondary);
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--primary);
+ text-decoration: underline;
+ transition: color 0.2s ease-in-out;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 4px;
+ }
+}
+
+.breadcrumbSeparator {
+ color: var(--secondary);
+ flex-shrink: 0;
+}
+
+.breadcrumbCurrent {
+ color: var(--primary);
+}
+
+.actions {
+ display: none;
+
+ @media (min-width: 320px) {
+ display: flex;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+}
+
@media (min-width: 820px) {
- .right {
+ .content {
justify-content: space-between;
}
@@ -79,18 +80,164 @@
align-items: center;
justify-content: center;
/* background-color: var(--action); */
- border: 1px solid var(--border2);
- border-radius: 48px;
- padding-inline: 20px;
- color: var(--primary);
- font-size: 0.875rem;
- font-weight: 500;
- height: 48px;
}
}
-@media (min-width: 960px) {
- .left {
- width: 296px;
+.bubble {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 32px;
+ padding-inline: 16px;
+ color: var(--primary);
+ font-size: 0.875rem;
+ font-weight: 500;
+ height: 32px;
+ cursor: pointer;
+ gap: 4px;
+
+ &[data-selected] {
+ background-color: var(--action);
+ color: var(--primary);
+ }
+
+ &:hover {
+ background-color: var(--action);
+ transition: background-color 0.2s ease-in-out;
+ }
+
+ &[data-hide-tablet] {
+ display: none;
+ }
+
+ @media (min-width: 1024px) {
+ &[data-hide-tablet] {
+ display: flex;
+ }
+ }
+}
+
+.buttonGroup {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ border: 1px solid var(--border);
+ border-radius: 32px;
+ padding-inline: 4px;
+ height: 32px;
+ display: none;
+
+ @media (min-width: 480px) {
+ display: flex;
+ }
+}
+
+.buttonGroup button {
+ height: 24px;
+ background-color: var(--bg);
+ border: none;
+ border-radius: 28px;
+ padding-inline: 16px;
+ color: var(--primary);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+
+ &[data-selected] {
+ background-color: var(--action);
+ color: var(--primary);
+ }
+
+ &:hover {
+ background-color: var(--action);
+ transition: background-color 0.2s ease-in-out;
+ }
+}
+
+.Popup {
+ box-sizing: border-box;
+ padding-block: 0.25rem;
+ border-radius: 0.375rem;
+ background-color: var(--bg);
+ color: var(--color-gray-900);
+ border: 1px solid var(--border);
+ padding-inline: 0.25rem;
+ transform-origin: var(--transform-origin);
+ transition: transform 150ms, opacity 150ms;
+
+ &[data-starting-style],
+ &[data-ending-style] {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+
+ &[data-side='none'] {
+ transition: none;
+ transform: none;
+ opacity: 1;
+ }
+
+ @media (prefers-color-scheme: light) {
+ outline: 1px solid var(--color-gray-200);
+ box-shadow: 0px 10px 15px -3px var(--color-gray-200),
+ 0px 4px 6px -4px var(--color-gray-200);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ outline: 1px solid var(--color-gray-300);
+ outline-offset: -1px;
+ }
+}
+
+.Popup[data-trigger='Select'] {
+ min-width: var(--trigger-width);
+
+ .ListBox {
+ display: block;
+ width: unset;
+ max-height: inherit;
+ min-height: unset;
+ border: none;
+
+ .react-aria-Header {
+ padding-left: 1.571rem;
+ }
+ }
+
+ .Item {
+ position: relative;
+ padding: 0 0.571rem 0 1.571rem;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+
+ &[data-focus-visible] {
+ outline: none;
+ }
+
+ &[data-selected] {
+ font-weight: 600;
+ background: unset;
+ color: var(--text-color);
+
+ &::before {
+ content: '✓';
+ content: '✓' / '';
+ alt: ' ';
+ position: absolute;
+ left: 4px;
+ }
+ }
+
+ &[data-focused],
+ &[data-pressed] {
+ background: var(--bg);
+ color: var(--primary);
+ cursor: pointer;
+ }
}
}
diff --git a/docs-ui/src/components/Toolbar/Toolbar.tsx b/docs-ui/src/components/Toolbar/Toolbar.tsx
index 29570739f8..e7defd5e8a 100644
--- a/docs-ui/src/components/Toolbar/Toolbar.tsx
+++ b/docs-ui/src/components/Toolbar/Toolbar.tsx
@@ -1,52 +1,168 @@
'use client';
-import { RiGithubLine, RiNpmjsLine } from '@remixicon/react';
-import { motion, useScroll, useTransform } from 'framer-motion';
-import { useRef } from 'react';
-import { Logo } from './Logo';
-import { ThemeSelector } from './theme';
-import { ThemeNameSelector } from './theme-name';
+import {
+ RiArrowDownSLine,
+ RiArrowRightSLine,
+ RiGithubLine,
+ RiMoonLine,
+ RiSunLine,
+} from '@remixicon/react';
+import {
+ Button,
+ ListBox,
+ ListBoxItem,
+ Popover,
+ Select,
+ SelectValue,
+ ToggleButton,
+ ToggleButtonGroup,
+} from 'react-aria-components';
import styles from './Toolbar.module.css';
+import { usePlayground } from '@/utils/playground-context';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { components, layoutComponents } from '@/utils/data';
+import { Logo } from '@/components/Sidebar/Logo';
interface ToolbarProps {
version: string;
}
-export const Toolbar = ({ version }: ToolbarProps) => {
- const containerRef = useRef(null);
- const { scrollY } = useScroll();
+const themes = [
+ { name: 'Backstage', value: 'backstage' },
+ { name: 'Spotify', value: 'spotify' },
+ { name: 'Custom theme', value: 'custom' },
+];
- // Transform scroll velocity to vertical movement
- const y = useTransform(scrollY, [0, 100], [0, -20], {
- clamp: false,
- });
+export const Toolbar = ({ version }: ToolbarProps) => {
+ const {
+ selectedTheme,
+ setSelectedTheme,
+ selectedThemeName,
+ setSelectedThemeName,
+ } = usePlayground();
+
+ const pathname = usePathname();
+
+ // Determine breadcrumb content based on current path
+ const getBreadcrumb = () => {
+ const allComponents = [...components, ...layoutComponents];
+
+ // Root page
+ if (pathname === '/') {
+ return { section: null, title: 'Getting Started' };
+ }
+
+ // Components index page
+ if (pathname === '/components') {
+ return { section: null, title: 'Components' };
+ }
+
+ // Component detail pages
+ if (pathname?.startsWith('/components/')) {
+ const slug = pathname.split('/components/')[1];
+ const component = allComponents.find(c => c.slug === slug);
+ return {
+ section: 'Components',
+ sectionLink: '/components',
+ title: component?.title || slug,
+ };
+ }
+
+ // Tokens page
+ if (pathname === '/tokens') {
+ return { section: null, title: 'Tokens' };
+ }
+
+ // Changelog page
+ if (pathname === '/changelog') {
+ return { section: null, title: 'Changelog' };
+ }
+
+ return { section: null, title: '' };
+ };
+
+ const breadcrumb = getBreadcrumb();
return (
-
{type}
+
+
+
+
+
+
+
+ );
+};
diff --git a/docs-ui/src/components/Sidebar/index.tsx b/docs-ui/src/components/Sidebar/index.tsx
deleted file mode 100644
index 59e297e26e..0000000000
--- a/docs-ui/src/components/Sidebar/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client';
-
-import styles from './Sidebar.module.css';
-import {
- components,
- overview,
- layoutComponents,
- coreConcepts,
-} from '@/utils/data';
-import { ScrollArea } from '@base-ui-components/react/scroll-area';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { motion } from 'motion/react';
-import { Fragment } from 'react';
-
-const data = [
- {
- title: 'Overview',
- content: overview,
- url: '',
- },
- {
- title: 'Core Concepts',
- content: coreConcepts,
- url: '',
- },
- {
- title: 'Layout Components',
- content: layoutComponents,
- url: '/components',
- },
- {
- title: 'Components',
- content: components,
- url: '/components',
- },
-];
-
-export const Sidebar = () => {
- const pathname = usePathname();
- const isPlayground = pathname.includes('/playground');
-
- return (
-
+
+
+
+
+
+
-
-
-
-
-
-
-
- );
-};
diff --git a/docs-ui/src/components/Snippet/styles.module.css b/docs-ui/src/components/Snippet/styles.module.css
index bb0d1cbc50..3141564293 100644
--- a/docs-ui/src/components/Snippet/styles.module.css
+++ b/docs-ui/src/components/Snippet/styles.module.css
@@ -5,9 +5,9 @@
}
.preview {
- border-radius: 4px;
+ border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--border);
- background-color: var(--bg);
+ background-color: var(--bui-bg);
padding: 1px;
position: relative;
}
diff --git a/docs-ui/src/components/StickyHeader/StickyHeader.module.css b/docs-ui/src/components/StickyHeader/StickyHeader.module.css
deleted file mode 100644
index 7cfc197f83..0000000000
--- a/docs-ui/src/components/StickyHeader/StickyHeader.module.css
+++ /dev/null
@@ -1,98 +0,0 @@
-.stickyHeader {
- position: fixed;
- top: 0px;
- left: 32px;
- right: 32px;
- z-index: 99999;
- background-color: var(--background);
- padding: 16px 20px 16px 40px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- backdrop-filter: blur(10px);
- pointer-events: auto;
- isolation: isolate;
- transform: translateZ(0);
- opacity: 0;
- width: calc(100% - 64px);
- mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
- -webkit-mask-image: linear-gradient(
- to bottom,
- black 0%,
- black 80%,
- transparent 100%
- );
-}
-
-@media (max-width: 768px) {
- .stickyHeader {
- display: none;
- }
-}
-
-.right {
- display: flex;
- align-items: center;
- gap: 24px;
-}
-
-.name {
- font-size: 24px;
- color: var(--text-primary);
- font-weight: 400;
-}
-
-.version {
- font-size: 14px;
- color: var(--text-secondary);
- font-weight: 500;
-}
-
-.actions {
- display: flex;
- align-items: center;
- gap: 16px;
-}
-
-.versionLinks {
- display: flex;
- align-items: center;
-
- a {
- width: 48px;
- height: 48px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--secondary);
- transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
- border-radius: 48px;
-
- &:hover {
- color: var(--primary);
- background-color: var(--action);
- }
- }
-}
-
-@media (max-width: 768px) {
- .stickyHeader {
- padding: 12px 16px;
- }
-
- .right {
- gap: 16px;
- }
-
- .version {
- font-size: 12px;
- }
-}
-
-@media (min-width: 768px) {
- .stickyHeader {
- width: calc(100% - 332px - 40px);
- left: 332px;
- right: 40px;
- }
-}
diff --git a/docs-ui/src/components/StickyHeader/StickyHeader.tsx b/docs-ui/src/components/StickyHeader/StickyHeader.tsx
deleted file mode 100644
index 804d759715..0000000000
--- a/docs-ui/src/components/StickyHeader/StickyHeader.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import { motion, useScroll, useTransform, circOut } from 'framer-motion';
-import { RiGithubLine, RiNpmjsLine } from '@remixicon/react';
-import { ThemeSelector } from '../Toolbar/theme';
-import { ThemeNameSelector } from '../Toolbar/theme-name';
-import { useCurrentPage } from '@/hooks/useCurrentPage';
-import styles from './StickyHeader.module.css';
-
-export const StickyHeader = () => {
- const { scrollY } = useScroll();
- const currentPage = useCurrentPage();
-
- // Transform scroll position to opacity only
- const opacity = useTransform(scrollY, [100, 200], [0, 1], {
- clamp: false,
- });
-
- const yPos = useTransform(scrollY, [200, 500], [-60, 0], {
- clamp: true,
- ease: circOut,
- });
-
- return (
-
-
-
-
- {data.map(section => {
- return (
-
-
- );
- })}
-
-
- {section.title}
-
- {section.content.map(item => {
- const isActive =
- pathname === `${section.url}/${item.slug}`;
-
- return (
-
- {item.title}
-
- {item.status === 'alpha' && 'Alpha'}
- {item.status === 'beta' && 'Beta'}
- {item.status === 'inProgress' && 'In Progress'}
- {item.status === 'stable' && 'Stable'}
- {item.status === 'deprecated' && 'Deprecated'}
-
-
- );
- })}
- {currentPage || 'Backstage UI'}
-
-
-
-
-
- Version {version} - Alpha
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/docs-ui/src/content/accordion.mdx b/docs-ui/src/content/accordion.mdx
new file mode 100644
index 0000000000..2694f8d144
--- /dev/null
+++ b/docs-ui/src/content/accordion.mdx
@@ -0,0 +1,128 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { AccordionSnippet } from '@/snippets/stories-snippets';
+import {
+ accordionPropDefs,
+ accordionTriggerPropDefs,
+ accordionPanelPropDefs,
+ accordionGroupPropDefs,
+ accordionUsageSnippet,
+ accordionWithSubtitleSnippet,
+ accordionCustomTriggerSnippet,
+ accordionDefaultExpandedSnippet,
+ accordionGroupSingleOpenSnippet,
+ accordionGroupMultipleOpenSnippet,
+} from './accordion.props';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
+
);
};
diff --git a/docs-ui/src/components/Toolbar/theme-name.module.css b/docs-ui/src/components/Toolbar/theme-name.module.css
deleted file mode 100644
index 1e1943b886..0000000000
--- a/docs-ui/src/components/Toolbar/theme-name.module.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.Select {
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 0.75rem;
- height: 3rem;
- padding-left: 1.25rem;
- padding-right: 1rem;
- margin: 0;
- outline: 0;
- border: 1px solid var(--color-gray-200);
- border-radius: 3rem;
- font-family: inherit;
- font-size: 1rem;
- line-height: 1.5rem;
- color: var(--color-gray-900);
- cursor: pointer;
- user-select: none;
- background-color: var(--action);
-
- &:focus-visible {
- outline: 2px solid var(--color-blue);
- outline-offset: -1px;
- }
-}
-
-.Popup {
- box-sizing: border-box;
- padding-block: 0.25rem;
- border-radius: 0.375rem;
- background-color: var(--panel);
- color: var(--color-gray-900);
- border: 1px solid var(--border);
- padding-inline: 0.25rem;
- transform-origin: var(--transform-origin);
- transition: transform 150ms, opacity 150ms;
-
- &[data-starting-style],
- &[data-ending-style] {
- opacity: 0;
- transform: scale(0.9);
- }
-
- &[data-side='none'] {
- transition: none;
- transform: none;
- opacity: 1;
- }
-
- @media (prefers-color-scheme: light) {
- outline: 1px solid var(--color-gray-200);
- box-shadow: 0px 10px 15px -3px var(--color-gray-200),
- 0px 4px 6px -4px var(--color-gray-200);
- }
-
- @media (prefers-color-scheme: dark) {
- outline: 1px solid var(--color-gray-300);
- outline-offset: -1px;
- }
-}
-
-.Popup[data-trigger='Select'] {
- min-width: var(--trigger-width);
-
- .ListBox {
- display: block;
- width: unset;
- max-height: inherit;
- min-height: unset;
- border: none;
-
- .react-aria-Header {
- padding-left: 1.571rem;
- }
- }
-
- .Item {
- position: relative;
- padding: 0 0.571rem 0 1.571rem;
- height: 2rem;
- display: flex;
- align-items: center;
-
- &[data-focus-visible] {
- outline: none;
- }
-
- &[data-selected] {
- font-weight: 600;
- background: unset;
- color: var(--text-color);
-
- &::before {
- content: '✓';
- content: '✓' / '';
- alt: ' ';
- position: absolute;
- left: 4px;
- }
- }
-
- &[data-focused],
- &[data-pressed] {
- background: var(--bg);
- color: var(--primary);
- cursor: pointer;
- }
- }
-}
diff --git a/docs-ui/src/components/Toolbar/theme-name.tsx b/docs-ui/src/components/Toolbar/theme-name.tsx
deleted file mode 100644
index 06c8ec66ec..0000000000
--- a/docs-ui/src/components/Toolbar/theme-name.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import {
- Button,
- ListBox,
- ListBoxItem,
- Popover,
- Select,
- SelectValue,
-} from 'react-aria-components';
-import styles from './theme-name.module.css';
-import { Icon } from '@backstage/ui';
-import { usePlayground } from '@/utils/playground-context';
-
-const themes = [
- { name: 'Backstage', value: 'backstage' },
- { name: 'Spotify', value: 'spotify' },
- { name: 'Custom theme', value: 'custom' },
-];
-
-export const ThemeNameSelector = () => {
- const { selectedThemeName, setSelectedThemeName } = usePlayground();
-
- return (
-
- );
-};
diff --git a/docs-ui/src/components/Toolbar/theme.module.css b/docs-ui/src/components/Toolbar/theme.module.css
deleted file mode 100644
index c5490a72d7..0000000000
--- a/docs-ui/src/components/Toolbar/theme.module.css
+++ /dev/null
@@ -1,79 +0,0 @@
-.tabs {
- border-radius: 0.375rem;
- width: 100%;
-}
-
-.tabsTheme {
- width: 100px;
- border-radius: 0.375rem;
-}
-
-.list {
- display: flex;
- position: relative;
- z-index: 0;
- gap: 0.25rem;
-}
-
-.tab {
- display: flex;
- align-items: center;
- justify-content: center;
- border: 0;
- margin: 0;
- outline: 0;
- background: none;
- appearance: none;
- color: var(--secondary);
- user-select: none;
- flex: 1;
- cursor: pointer;
- width: 3rem;
- height: 3rem;
-
- &[data-selected] {
- color: var(--primary);
-
- & p {
- color: var(--primary);
- }
- }
-
- @media (hover: hover) {
- &:hover {
- color: var(--primary);
- }
- }
-
- &:focus-visible {
- position: relative;
-
- &::before {
- content: '';
- position: absolute;
- inset: 0.25rem 0;
- border-radius: 0.25rem;
- outline: 2px solid var(--action);
- outline-offset: -1px;
- }
- }
-}
-
-.tab p {
- color: var(--secondary) !important;
-}
-
-.indicator {
- position: absolute;
- z-index: -1;
- left: 0;
- top: 50%;
- translate: var(--active-tab-left) -50%;
- width: var(--active-tab-width);
- height: 3rem;
- border-radius: 3rem;
- background-color: var(--action);
- transition-property: translate, width;
- transition-duration: 200ms;
- transition-timing-function: ease-in-out;
-}
diff --git a/docs-ui/src/components/Toolbar/theme.tsx b/docs-ui/src/components/Toolbar/theme.tsx
deleted file mode 100644
index ef3d842056..0000000000
--- a/docs-ui/src/components/Toolbar/theme.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-
-import { Tabs } from '@base-ui-components/react/tabs';
-import { Icon } from '@backstage/ui';
-import { usePlayground } from '@/utils/playground-context';
-import styles from './theme.module.css';
-
-export const ThemeSelector = () => {
- const { selectedTheme, setSelectedTheme } = usePlayground();
-
- return (
-
+
+
+
-
+
+ {breadcrumb.section && breadcrumb.sectionLink ? (
+ <>
+
+ {breadcrumb.section}
+
+
+ ` element.
+
+