` element.
+
+
## Examples
### With Subtitle
-Here's a view when using both title and subtitle props.
+Accordions can display a subtitle below the title.
}
- code={accordionWithSubtitleSnippet}
+ preview={
}
+ code={withSubtitleSnippet}
+ layout="side-by-side"
/>
### Custom Trigger
-Here's a view when providing custom multi-line content as children.
+Pass custom content as children instead of using the title prop.
}
- code={accordionCustomTriggerSnippet}
+ preview={
}
+ code={customTriggerSnippet}
/>
### Default Expanded
-Here's a view when the panel is expanded by default.
-
}
- code={accordionDefaultExpandedSnippet}
+ preview={
}
+ code={defaultExpandedSnippet}
+ layout="side-by-side"
/>
### Group Single Open
-Here's a view when only one accordion can be open at a time.
+Use `AccordionGroup` to allow only one accordion open at a time.
}
- code={accordionGroupSingleOpenSnippet}
+ preview={
}
+ code={groupSingleOpenSnippet}
/>
### Group Multiple Open
-Here's a view when multiple accordions can be open simultaneously.
+Allows multiple panels to be open simultaneously.
}
- code={accordionGroupMultipleOpenSnippet}
+ preview={
}
+ code={groupMultipleOpenSnippet}
/>
diff --git a/docs-ui/src/app/components/accordion/props-definition.ts b/docs-ui/src/app/components/accordion/props-definition.ts
new file mode 100644
index 0000000000..b465526632
--- /dev/null
+++ b/docs-ui/src/app/components/accordion/props-definition.ts
@@ -0,0 +1,82 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+
+export const accordionPropDefs: Record
= {
+ children: {
+ type: 'enum',
+ values: ['ReactNode', '(state: { isExpanded: boolean }) => ReactNode'],
+ description:
+ 'Content of the accordion. Can be a render function to access expanded state.',
+ },
+ defaultExpanded: {
+ type: 'boolean',
+ default: 'false',
+ description: 'Whether the accordion is expanded on initial render.',
+ },
+ isExpanded: {
+ type: 'boolean',
+ description: 'Controls the expanded state (controlled mode).',
+ },
+ onExpandedChange: {
+ type: 'enum',
+ values: ['(isExpanded: boolean) => void'],
+ description: 'Called when the expanded state changes.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const accordionTriggerPropDefs: Record = {
+ level: {
+ type: 'enum',
+ values: ['1', '2', '3', '4', '5', '6'],
+ default: '3',
+ description:
+ 'Heading level for accessibility (renders h1-h6). Match your page hierarchy.',
+ },
+ title: {
+ type: 'string',
+ description: 'Primary text displayed in the trigger.',
+ },
+ subtitle: {
+ type: 'string',
+ description: 'Secondary text displayed next to the title.',
+ },
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description:
+ 'Custom trigger content. When provided, title and subtitle are ignored.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const accordionPanelPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Content displayed when the accordion is expanded.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const accordionGroupPropDefs: Record = {
+ allowsMultiple: {
+ type: 'boolean',
+ default: 'false',
+ description:
+ 'Whether multiple accordions can be expanded at the same time.',
+ },
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Accordion components to group together.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/accordion/snippets.ts b/docs-ui/src/app/components/accordion/snippets.ts
new file mode 100644
index 0000000000..83e89d1b64
--- /dev/null
+++ b/docs-ui/src/app/components/accordion/snippets.ts
@@ -0,0 +1,68 @@
+export const accordionUsageSnippet = `import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui';
+
+
+
+ Your content
+`;
+
+export const defaultSnippet = `
+
+
+ Your content here
+
+`;
+
+export const withSubtitleSnippet = `
+
+
+ Your content here
+
+`;
+
+export const customTriggerSnippet = `
+
+
+
+ Custom Multi-line Trigger
+
+
+ Click to expand additional details and configuration options
+
+
+
+
+ Your content here
+
+`;
+
+export const defaultExpandedSnippet = `
+
+
+ Your content here
+
+`;
+
+export const groupSingleOpenSnippet = `
+
+
+ Content 1
+
+
+
+ Content 2
+
+`;
+
+export const groupMultipleOpenSnippet = `
+
+
+ Content 1
+
+
+
+ Content 2
+
+`;
diff --git a/docs-ui/src/app/components/alert/components.tsx b/docs-ui/src/app/components/alert/components.tsx
new file mode 100644
index 0000000000..afc5eb654c
--- /dev/null
+++ b/docs-ui/src/app/components/alert/components.tsx
@@ -0,0 +1,168 @@
+'use client';
+
+import { Alert } from '../../../../../packages/ui/src/components/Alert/Alert';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { Button } from '../../../../../packages/ui/src/components/Button/Button';
+import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
+import { RiCloseLine, RiCloudLine } from '@remixicon/react';
+
+export const Default = () => {
+ return ;
+};
+
+export const StatusVariants = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export const WithDescription = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export const WithActions = () => {
+ return (
+
+
+ Dismiss
+
+ }
+ />
+ }
+ aria-label="Close"
+ />
+ }
+ />
+
+ );
+};
+
+export const WithActionsAndDescriptions = () => {
+ return (
+
+
+
+
+ }
+ />
+ );
+};
+
+export const LoadingStates = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export const WithoutIcons = () => {
+ return (
+
+
+
+
+ );
+};
+
+export const CustomIcon = () => {
+ return (
+ }
+ title="This alert uses a custom cloud icon instead of the default info icon."
+ />
+ );
+};
diff --git a/docs-ui/src/app/components/alert/page.mdx b/docs-ui/src/app/components/alert/page.mdx
new file mode 100644
index 0000000000..cdfdf184e0
--- /dev/null
+++ b/docs-ui/src/app/components/alert/page.mdx
@@ -0,0 +1,120 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { alertPropDefs } from './props-definition';
+import {
+ alertUsageSnippet,
+ defaultSnippet,
+ statusVariantsSnippet,
+ withDescriptionSnippet,
+ withActionsSnippet,
+ loadingStatesSnippet,
+ withoutIconsSnippet,
+ customIconSnippet,
+} from './snippets';
+import {
+ Default,
+ StatusVariants,
+ WithDescription,
+ WithActions,
+ LoadingStates,
+ WithoutIcons,
+ CustomIcon,
+} from './components';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { AlertDefinition } from '../../../utils/definitions';
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+
+
+## Examples
+
+### Status Variants
+
+The Alert component supports four status variants, each with its own color theme.
+
+}
+ code={statusVariantsSnippet}
+/>
+
+### With Description
+
+Add a description to provide additional context or details.
+
+}
+ code={withDescriptionSnippet}
+/>
+
+### With Actions
+
+Include custom actions like buttons for interactive alerts.
+
+}
+ code={withActionsSnippet}
+/>
+
+### Loading States
+
+The loading spinner replaces the icon to indicate an ongoing process.
+
+}
+ code={loadingStatesSnippet}
+/>
+
+### Without Icons
+
+Disable icons for a simpler appearance.
+
+}
+ code={withoutIconsSnippet}
+/>
+
+### Custom Icon
+
+Provide a custom icon element instead of the default status icon.
+
+}
+ code={customIconSnippet}
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/alert/props-definition.ts b/docs-ui/src/app/components/alert/props-definition.ts
new file mode 100644
index 0000000000..6f2650fe42
--- /dev/null
+++ b/docs-ui/src/app/components/alert/props-definition.ts
@@ -0,0 +1,76 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+
+export const alertPropDefs: Record = {
+ status: {
+ type: 'enum',
+ values: ['info', 'success', 'warning', 'danger'],
+ responsive: true,
+ default: 'info',
+ },
+ icon: {
+ type: 'enum',
+ values: ['boolean', 'React.ReactElement'],
+ responsive: false,
+ },
+ loading: {
+ type: 'enum',
+ values: ['boolean'],
+ responsive: false,
+ },
+ title: {
+ type: 'enum',
+ values: ['React.ReactNode'],
+ responsive: false,
+ },
+ description: {
+ type: 'enum',
+ values: ['React.ReactNode'],
+ responsive: false,
+ },
+ customActions: {
+ type: 'enum',
+ values: ['React.ReactNode'],
+ responsive: false,
+ },
+ m: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+ responsive: true,
+ },
+ mx: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+ responsive: true,
+ },
+ my: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+ responsive: true,
+ },
+ mt: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+ responsive: true,
+ },
+ mb: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+ responsive: true,
+ },
+ ml: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+ responsive: true,
+ },
+ mr: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+ responsive: true,
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/alert/snippets.ts b/docs-ui/src/app/components/alert/snippets.ts
new file mode 100644
index 0000000000..739dfde9db
--- /dev/null
+++ b/docs-ui/src/app/components/alert/snippets.ts
@@ -0,0 +1,131 @@
+export const alertUsageSnippet = `import { Alert } from '@backstage/ui';
+
+`;
+
+export const defaultSnippet = ``;
+
+export const statusVariantsSnippet = `
+
+
+
+
+`;
+
+export const withDescriptionSnippet = `
+
+
+
+
+`;
+
+export const withActionsSnippet = `
+
+ Dismiss
+
+ }
+ />
+ }
+ aria-label="Close"
+ />
+ }
+ />
+`;
+
+export const withActionsAndDescriptionsSnippet = `
+
+
+
+ }
+/>`;
+
+export const loadingStatesSnippet = `
+
+
+
+`;
+
+export const withoutIconsSnippet = `
+
+
+`;
+
+export const customIconSnippet = `import { RiCloudLine } from '@remixicon/react';
+
+}
+ title="This alert uses a custom cloud icon instead of the default info icon."
+/>`;
diff --git a/docs-ui/src/app/components/avatar/components.tsx b/docs-ui/src/app/components/avatar/components.tsx
new file mode 100644
index 0000000000..da257f13b9
--- /dev/null
+++ b/docs-ui/src/app/components/avatar/components.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { Avatar } from '../../../../../packages/ui/src/components/Avatar/Avatar';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { Text } from '../../../../../packages/ui/src/components/Text/Text';
+
+export const Default = () => {
+ return (
+
+ );
+};
+
+export const Fallback = () => {
+ return (
+
+ );
+};
+
+export const Sizes = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const Purpose = () => {
+ return (
+
+
+ Informative (default)
+
+ Use when avatar appears alone. Announced as "Charles de
+ Dreuille" to screen readers:
+
+
+
+
+
+
+ Decoration
+
+ Use when avatar appears with adjacent text. Hidden from screen
+ readers:
+
+
+
+ Charles de Dreuille
+
+
+
+ );
+};
diff --git a/docs-ui/src/content/avatar.mdx b/docs-ui/src/app/components/avatar/page.mdx
similarity index 50%
rename from docs-ui/src/content/avatar.mdx
rename to docs-ui/src/app/components/avatar/page.mdx
index 047485c2cc..7020eb90c4 100644
--- a/docs-ui/src/content/avatar.mdx
+++ b/docs-ui/src/app/components/avatar/page.mdx
@@ -1,39 +1,37 @@
import { PropsTable } from '@/components/PropsTable';
import { Snippet } from '@/components/Snippet';
import { CodeBlock } from '@/components/CodeBlock';
-import { AvatarSnippet } from '@/snippets/stories-snippets';
+import { avatarPropDefs } from './props-definition';
import {
- avatarPropDefs,
- snippetUsage,
- snippetSizes,
- snippetFallback,
- snippetPurpose,
-} from './avatar.props';
+ avatarUsageSnippet,
+ defaultSnippet,
+ sizesSnippet,
+ fallbackSnippet,
+ purposeSnippet,
+} from './snippets';
+import { Default, Sizes, Fallback, Purpose } from './components';
import { PageTitle } from '@/components/PageTitle';
import { Theming } from '@/components/Theming';
-import { AvatarDefinition } from '../utils/definitions';
+import { AvatarDefinition } from '../../../utils/definitions';
import { ChangelogComponent } from '@/components/ChangelogComponent';
-}
- code={``}
-/>
+} code={defaultSnippet} />
## Usage
-
+
## API reference
+Avatar also accepts all standard HTML div attributes (`onClick`, `onMouseEnter`, etc.) since it extends `React.ComponentPropsWithoutRef<'div'>`.
+
## Examples
### Sizes
@@ -44,8 +42,9 @@ Avatar sizes can be set using the `size` prop.
align="center"
py={4}
open
- preview={}
- code={snippetSizes}
+ preview={}
+ code={sizesSnippet}
+ layout="side-by-side"
/>
### Fallback
@@ -56,20 +55,16 @@ If the image is not available, the avatar will show the initials of the name.
align="center"
py={4}
open
- preview={}
- code={snippetFallback}
+ preview={}
+ code={fallbackSnippet}
+ layout="side-by-side"
/>
### The `purpose` prop
Control how the avatar is announced to screen readers using the `purpose` prop.
-}
- code={snippetPurpose}
-/>
+} code={purposeSnippet} />
diff --git a/docs-ui/src/app/components/avatar/props-definition.tsx b/docs-ui/src/app/components/avatar/props-definition.tsx
new file mode 100644
index 0000000000..4b56b94be5
--- /dev/null
+++ b/docs-ui/src/app/components/avatar/props-definition.tsx
@@ -0,0 +1,41 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const avatarPropDefs: Record = {
+ src: {
+ type: 'string',
+ description:
+ 'URL of the image to display. Pass an empty string to show initials fallback. Falls back to initials if the image fails to load.',
+ },
+ name: {
+ type: 'string',
+ required: true,
+ description:
+ 'Name of the person. Used for generating initials fallback and accessibility label.',
+ },
+ size: {
+ type: 'enum',
+ values: ['x-small', 'small', 'medium', 'large', 'x-large'],
+ default: 'medium',
+ responsive: true,
+ description:
+ 'Visual size. Smaller sizes show 1 initial, larger sizes show 2.',
+ },
+ purpose: {
+ type: 'enum',
+ values: ['informative', 'decoration'],
+ default: 'informative',
+ description: (
+ <>
+ Accessibility behavior. Use decoration when name appears in
+ adjacent text.
+
+ ),
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/avatar/snippets.ts b/docs-ui/src/app/components/avatar/snippets.ts
new file mode 100644
index 0000000000..2deb8037a6
--- /dev/null
+++ b/docs-ui/src/app/components/avatar/snippets.ts
@@ -0,0 +1,52 @@
+export const avatarUsageSnippet = `import { Avatar } from '@backstage/ui';
+
+`;
+
+export const defaultSnippet = ``;
+
+export const fallbackSnippet = ``;
+
+export const sizesSnippet = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+export const purposeSnippet = `
+
+ Informative (default)
+
+ Use when avatar appears alone. Announced as "Charles de Dreuille" to screen readers:
+
+
+
+
+
+
+ Decoration
+
+ Use when avatar appears with adjacent text. Hidden from screen readers:
+
+
+
+ Charles de Dreuille
+
+
+`;
diff --git a/docs-ui/src/app/components/box/components.tsx b/docs-ui/src/app/components/box/components.tsx
new file mode 100644
index 0000000000..dac66f1f59
--- /dev/null
+++ b/docs-ui/src/app/components/box/components.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { Box } from '../../../../../packages/ui/src/components/Box/Box';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { DecorativeBox } from '@/components/DecorativeBox';
+
+export const Default = () => {
+ return (
+
+
+
+ );
+};
+
+export const Surface = () => {
+ return (
+
+
+ Surface 0
+
+
+ Surface 1
+
+
+ Surface 2
+
+
+ Surface 3
+
+
+ );
+};
+
+export const Responsive = () => {
+ return (
+
+ Resize to see change
+
+ );
+};
diff --git a/docs-ui/src/app/components/box/page.mdx b/docs-ui/src/app/components/box/page.mdx
new file mode 100644
index 0000000000..9b60e5244a
--- /dev/null
+++ b/docs-ui/src/app/components/box/page.mdx
@@ -0,0 +1,53 @@
+import { CodeBlock } from '@/components/CodeBlock';
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { boxPropDefs } from './props-definition';
+import {
+ snippetUsage,
+ defaultSnippet,
+ boxSurfaceSnippet,
+ boxResponsiveSnippet,
+} from './snippets';
+import { Default, Surface, Responsive } from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { BoxDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
+
+} code={defaultSnippet} align="center" />
+
+## Usage
+
+
+
+## API reference
+
+
+
+## Examples
+
+### Surface
+
+Use surface levels to create visual hierarchy.
+
+} code={boxSurfaceSnippet} layout="side-by-side" />
+
+### Responsive props
+
+Props can accept breakpoint objects for responsive behavior.
+
+}
+ code={boxResponsiveSnippet}
+ layout="side-by-side"
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/box/props-definition.tsx b/docs-ui/src/app/components/box/props-definition.tsx
new file mode 100644
index 0000000000..3809bb9993
--- /dev/null
+++ b/docs-ui/src/app/components/box/props-definition.tsx
@@ -0,0 +1,48 @@
+import {
+ classNamePropDefs,
+ heightPropDefs,
+ positionPropDefs,
+ stylePropDefs,
+ widthPropDefs,
+ spacingGroupAll,
+ type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const boxPropDefs: Record = {
+ as: {
+ type: 'string',
+ default: 'div',
+ description:
+ 'HTML element to render. Accepts any valid HTML tag (div, span, section, etc.).',
+ },
+ surface: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', 'danger', 'warning', 'success', 'auto'],
+ responsive: true,
+ description:
+ 'Background surface level for visual hierarchy. Higher numbers create elevation.',
+ },
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Content to render inside the box.',
+ },
+ ...widthPropDefs,
+ ...heightPropDefs,
+ ...positionPropDefs,
+ display: {
+ type: 'enum',
+ values: ['none', 'flex', 'block', 'inline'],
+ responsive: true,
+ description: (
+ <>
+ Controls layout behavior. Use flex for flexbox layouts,{' '}
+ none to hide.
+
+ ),
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+ spacing: spacingGroupAll,
+};
diff --git a/docs-ui/src/app/components/box/snippets.ts b/docs-ui/src/app/components/box/snippets.ts
new file mode 100644
index 0000000000..e9af07dec5
--- /dev/null
+++ b/docs-ui/src/app/components/box/snippets.ts
@@ -0,0 +1,23 @@
+export const snippetUsage = `import { Box } from '@backstage/ui';
+
+
+ Content with padding and background
+`;
+
+export const defaultSnippet = `
+
+`;
+
+export const boxSurfaceSnippet = `
+ Surface 0
+ Surface 1
+ Surface 2
+ Surface 3
+`;
+
+export const boxResponsiveSnippet = `
+ Content
+`;
diff --git a/docs-ui/src/app/components/button-icon/components.tsx b/docs-ui/src/app/components/button-icon/components.tsx
new file mode 100644
index 0000000000..3ed421289c
--- /dev/null
+++ b/docs-ui/src/app/components/button-icon/components.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { RiCloudLine } from '@remixicon/react';
+
+export const Variants = () => {
+ return (
+
+ } variant="primary" aria-label="Cloud" />
+ }
+ variant="secondary"
+ aria-label="Cloud"
+ />
+ }
+ variant="tertiary"
+ aria-label="Cloud"
+ />
+
+ );
+};
+
+export const Sizes = () => {
+ return (
+
+ } size="small" aria-label="Cloud" />
+ } size="medium" aria-label="Cloud" />
+
+ );
+};
+
+export const Disabled = () => {
+ return (
+
+ }
+ variant="primary"
+ aria-label="Cloud"
+ />
+ }
+ variant="secondary"
+ aria-label="Cloud"
+ />
+ }
+ variant="tertiary"
+ aria-label="Cloud"
+ />
+
+ );
+};
+
+export const Loading = () => {
+ return (
+ }
+ variant="primary"
+ loading
+ aria-label="Cloud"
+ />
+ );
+};
diff --git a/docs-ui/src/app/components/button-icon/page.mdx b/docs-ui/src/app/components/button-icon/page.mdx
new file mode 100644
index 0000000000..51ff0ea5a0
--- /dev/null
+++ b/docs-ui/src/app/components/button-icon/page.mdx
@@ -0,0 +1,80 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { buttonIconPropDefs } from './props-definition';
+import {
+ buttonIconUsageSnippet,
+ variantsSnippet,
+ sizesSnippet,
+ disabledSnippet,
+ loadingSnippet,
+} from './snippets';
+import { Variants, Sizes, Disabled, Loading } from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ButtonIconDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+
+export const reactAriaUrls = {
+ button: 'https://react-aria.adobe.com/Button',
+};
+
+
+
+} code={variantsSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+
+
+
+
+## Examples
+
+### Variants
+
+}
+ code={variantsSnippet}
+/>
+
+### Sizes
+
+} code={sizesSnippet} />
+
+### Disabled
+
+}
+ code={disabledSnippet}
+/>
+
+### Loading
+
+Shows a spinner during async operations.
+
+}
+ code={loadingSnippet}
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/button-icon/props-definition.tsx b/docs-ui/src/app/components/button-icon/props-definition.tsx
new file mode 100644
index 0000000000..05917cc2b4
--- /dev/null
+++ b/docs-ui/src/app/components/button-icon/props-definition.tsx
@@ -0,0 +1,64 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const buttonIconPropDefs: Record = {
+ variant: {
+ type: 'enum',
+ values: ['primary', 'secondary', 'tertiary'],
+ default: 'primary',
+ responsive: true,
+ description: (
+ <>
+ Visual style. Use primary for main actions,{' '}
+ secondary for alternatives, tertiary for
+ low-emphasis.
+
+ ),
+ },
+ size: {
+ type: 'enum',
+ values: ['small', 'medium'],
+ default: 'small',
+ responsive: true,
+ description: (
+ <>
+ Button size. Use small for toolbars, medium{' '}
+ for standalone actions.
+
+ ),
+ },
+ icon: {
+ type: 'enum',
+ values: ['ReactElement'],
+ description:
+ 'Icon element to display. Required for accessibility via aria-label.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ default: 'false',
+ description: 'Prevents interaction and applies disabled styling.',
+ },
+ loading: {
+ type: 'boolean',
+ default: 'false',
+ description: 'Shows a spinner and disables the button.',
+ },
+ type: {
+ type: 'enum',
+ values: ['button', 'submit', 'reset'],
+ default: 'button',
+ description: 'HTML button type attribute.',
+ },
+ onSurface: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', 'danger', 'warning', 'success', 'auto'],
+ responsive: true,
+ description: 'Surface context for correct color contrast.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/button-icon/snippets.ts b/docs-ui/src/app/components/button-icon/snippets.ts
new file mode 100644
index 0000000000..b1ab27b77b
--- /dev/null
+++ b/docs-ui/src/app/components/button-icon/snippets.ts
@@ -0,0 +1,23 @@
+export const buttonIconUsageSnippet = `import { ButtonIcon } from '@backstage/ui';
+import { RiCloseLine } from '@remixicon/react';
+
+} aria-label="Close" />`;
+
+export const variantsSnippet = `
+ } variant="primary" aria-label="Cloud" />
+ } variant="secondary" aria-label="Cloud" />
+ } variant="tertiary" aria-label="Cloud" />
+`;
+
+export const sizesSnippet = `
+ } size="small" aria-label="Cloud" />
+ } size="medium" aria-label="Cloud" />
+`;
+
+export const disabledSnippet = `
+ } variant="primary" aria-label="Cloud" />
+ } variant="secondary" aria-label="Cloud" />
+ } variant="tertiary" aria-label="Cloud" />
+`;
+
+export const loadingSnippet = `} variant="primary" loading aria-label="Cloud" />`;
diff --git a/docs-ui/src/app/components/button-link/components.tsx b/docs-ui/src/app/components/button-link/components.tsx
new file mode 100644
index 0000000000..4282ebf7dd
--- /dev/null
+++ b/docs-ui/src/app/components/button-link/components.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import { ButtonLink } from '../../../../../packages/ui/src/components/ButtonLink/ButtonLink';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { MemoryRouter } from 'react-router-dom';
+import { RiArrowRightSLine, RiCloudLine } from '@remixicon/react';
+
+export const Variants = () => {
+ return (
+
+
+ }
+ variant="primary"
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+ }
+ variant="secondary"
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+ }
+ variant="tertiary"
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+
+
+ );
+};
+
+export const Sizes = () => {
+ return (
+
+
+
+ Small
+
+
+ Medium
+
+
+
+ );
+};
+
+export const WithIcons = () => {
+ return (
+
+
+ }
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+ }
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+ }
+ iconEnd={}
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+
+
+ );
+};
+
+export const Disabled = () => {
+ return (
+
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+
+ );
+};
diff --git a/docs-ui/src/app/components/button-link/page.mdx b/docs-ui/src/app/components/button-link/page.mdx
new file mode 100644
index 0000000000..35e4de68c5
--- /dev/null
+++ b/docs-ui/src/app/components/button-link/page.mdx
@@ -0,0 +1,68 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { buttonLinkPropDefs } from './props-definition';
+import {
+ buttonLinkUsageSnippet,
+ variantsSnippet,
+ sizesSnippet,
+ withIconsSnippet,
+ disabledSnippet,
+} from './snippets';
+import { Variants, Sizes, WithIcons, Disabled } from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ButtonLinkDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+
+export const reactAriaUrls = {
+ link: 'https://react-aria.adobe.com/Link',
+};
+
+
+
+} code={variantsSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+
+
+
+
+## Examples
+
+### Sizes
+
+} code={sizesSnippet} />
+
+### With Icons
+
+}
+ code={withIconsSnippet}
+/>
+
+### Disabled
+
+}
+ code={disabledSnippet}
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/button-link/props-definition.tsx b/docs-ui/src/app/components/button-link/props-definition.tsx
new file mode 100644
index 0000000000..deae5364df
--- /dev/null
+++ b/docs-ui/src/app/components/button-link/props-definition.tsx
@@ -0,0 +1,74 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ childrenPropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const buttonLinkPropDefs: Record = {
+ variant: {
+ type: 'enum',
+ values: ['primary', 'secondary', 'tertiary'],
+ default: 'primary',
+ responsive: true,
+ description: (
+ <>
+ Visual style. Use primary for main actions,{' '}
+ secondary for alternatives, tertiary for
+ low-emphasis.
+
+ ),
+ },
+ size: {
+ type: 'enum',
+ values: ['small', 'medium'],
+ default: 'small',
+ responsive: true,
+ description: (
+ <>
+ Link size. Use small for inline contexts,{' '}
+ medium for standalone.
+
+ ),
+ },
+ iconStart: {
+ type: 'enum',
+ values: ['ReactElement'],
+ description: 'Icon displayed before the link text.',
+ },
+ iconEnd: {
+ type: 'enum',
+ values: ['ReactElement'],
+ description: 'Icon displayed after the link text.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ default: 'false',
+ description: 'Prevents interaction and applies disabled styling.',
+ },
+ href: {
+ type: 'string',
+ required: true,
+ description: 'URL the link navigates to.',
+ },
+ target: {
+ type: 'enum',
+ values: ['_self', '_blank', '_parent', '_top'],
+ description: (
+ <>
+ Where to open the linked URL. Use _blank for external
+ links.
+
+ ),
+ },
+ onSurface: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', 'danger', 'warning', 'success', 'auto'],
+ responsive: true,
+ description: 'Surface context for correct color contrast.',
+ },
+ ...childrenPropDefs,
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/button-link/snippets.ts b/docs-ui/src/app/components/button-link/snippets.ts
new file mode 100644
index 0000000000..7f1a69027c
--- /dev/null
+++ b/docs-ui/src/app/components/button-link/snippets.ts
@@ -0,0 +1,68 @@
+export const buttonLinkUsageSnippet = `import { ButtonLink } from '@backstage/ui';
+
+Button`;
+
+export const variantsSnippet = `
+ }
+ variant="primary"
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+ }
+ variant="secondary"
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+ }
+ variant="tertiary"
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+`;
+
+export const sizesSnippet = `
+
+ Small
+
+
+ Medium
+
+`;
+
+export const withIconsSnippet = `
+ } href="https://ui.backstage.io" target="_blank">
+ Button
+
+ } href="https://ui.backstage.io" target="_blank">
+ Button
+
+ }
+ iconEnd={}
+ href="https://ui.backstage.io"
+ target="_blank"
+ >
+ Button
+
+`;
+
+export const disabledSnippet = `
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+`;
diff --git a/docs-ui/src/app/components/button/components.tsx b/docs-ui/src/app/components/button/components.tsx
new file mode 100644
index 0000000000..1fe13f6630
--- /dev/null
+++ b/docs-ui/src/app/components/button/components.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { Button } from '../../../../../packages/ui/src/components/Button/Button';
+import { ButtonLink } from '../../../../../packages/ui/src/components/ButtonLink/ButtonLink';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { RiArrowRightSLine, RiCloudLine } from '@remixicon/react';
+import { MemoryRouter } from 'react-router-dom';
+
+export const Variants = () => {
+ return (
+
+ }>
+ Button
+
+ }>
+ Button
+
+ }>
+ Button
+
+
+ );
+};
+
+export const Sizes = () => {
+ return (
+
+
+
+
+ );
+};
+
+export const WithIcons = () => {
+ return (
+
+ }>Button
+ }>Button
+ } iconEnd={}>
+ Button
+
+
+ );
+};
+
+export const Disabled = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export const Destructive = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export const Loading = () => {
+ return (
+
+ );
+};
+
+export const AsLink = () => {
+ return (
+
+
+ Button
+
+
+ );
+};
diff --git a/docs-ui/src/app/components/button/page.mdx b/docs-ui/src/app/components/button/page.mdx
new file mode 100644
index 0000000000..6434a7f4a4
--- /dev/null
+++ b/docs-ui/src/app/components/button/page.mdx
@@ -0,0 +1,147 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { buttonPropDefs } from './props-definition';
+import {
+ variantsSnippet,
+ sizesSnippet,
+ withIconsSnippet,
+ disabledSnippet,
+ destructiveSnippet,
+ loadingSnippet,
+ asLinkSnippet,
+ buttonSnippetUsage,
+ buttonResponsiveSnippet,
+} from './snippets';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ButtonDefinition } from '../../../utils/definitions';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+import {
+ Variants,
+ Sizes,
+ WithIcons,
+ Disabled,
+ Destructive,
+ Loading,
+ AsLink,
+} from './components';
+
+export const reactAriaUrls = {
+ button: 'https://react-spectrum.adobe.com/react-aria/Button.html',
+};
+
+
+
+} code={variantsSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+
+
+
+
+## Examples
+
+### Variants
+
+}
+ code={variantsSnippet}
+ layout="side-by-side"
+/>
+
+### Sizes
+
+}
+ code={sizesSnippet}
+ layout="side-by-side"
+/>
+
+### With Icons
+
+Icons can appear before or after the label.
+
+}
+ code={withIconsSnippet}
+ layout="side-by-side"
+/>
+
+### Disabled
+
+}
+ code={disabledSnippet}
+ layout="side-by-side"
+/>
+
+### Destructive
+
+Use the `destructive` prop for dangerous actions like delete or remove.
+
+}
+ code={destructiveSnippet}
+ layout="side-by-side"
+/>
+
+### Loading
+
+Shows a spinner and disables interaction during async operations.
+
+}
+ code={loadingSnippet}
+ layout="side-by-side"
+/>
+
+### Responsive
+
+Button props accept responsive breakpoint objects.
+
+
+
+### As Link
+
+If you want to use a button as a link, please use the `ButtonLink` component.
+
+}
+ code={asLinkSnippet}
+ layout="side-by-side"
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/button/props-definition.tsx b/docs-ui/src/app/components/button/props-definition.tsx
new file mode 100644
index 0000000000..0f94fcffaf
--- /dev/null
+++ b/docs-ui/src/app/components/button/props-definition.tsx
@@ -0,0 +1,75 @@
+import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
+import type { PropDef } from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const buttonPropDefs: Record = {
+ variant: {
+ type: 'enum',
+ values: ['primary', 'secondary', 'tertiary'],
+ default: 'primary',
+ responsive: true,
+ description: (
+ <>
+ Visual style. Use primary for main actions,{' '}
+ secondary for alternatives, tertiary for
+ low-emphasis.
+
+ ),
+ },
+ destructive: {
+ type: 'boolean',
+ default: 'false',
+ description:
+ 'Applies destructive styling for dangerous actions like delete or remove.',
+ },
+ size: {
+ type: 'enum',
+ values: ['small', 'medium'],
+ default: 'small',
+ responsive: true,
+ description: (
+ <>
+ Button size. Use small for dense layouts.
+
+ ),
+ },
+ iconStart: {
+ type: 'enum',
+ values: ['ReactElement'],
+ description: 'Icon displayed before the button text.',
+ },
+ iconEnd: {
+ type: 'enum',
+ values: ['ReactElement'],
+ description: 'Icon displayed after the button text.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ default: 'false',
+ description: 'Prevents interaction and applies disabled styling.',
+ },
+ loading: {
+ type: 'boolean',
+ default: 'false',
+ description: 'Shows a spinner and disables the button.',
+ },
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Button label text or content.',
+ },
+ type: {
+ type: 'enum',
+ values: ['button', 'submit', 'reset'],
+ default: 'button',
+ description: 'HTML button type attribute.',
+ },
+ onSurface: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', 'danger', 'warning', 'success', 'auto'],
+ responsive: true,
+ description: 'Surface context for correct color contrast.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/button/snippets.ts b/docs-ui/src/app/components/button/snippets.ts
new file mode 100644
index 0000000000..6b8aba7e26
--- /dev/null
+++ b/docs-ui/src/app/components/button/snippets.ts
@@ -0,0 +1,66 @@
+export const buttonSnippetUsage = `import { Button } from '@backstage/ui';
+
+`;
+
+export const buttonResponsiveSnippet = ``;
+
+export const variantsSnippet = `
+ }>
+ Button
+
+ }>
+ Button
+
+ }>
+ Button
+
+`;
+
+export const sizesSnippet = `
+
+
+`;
+
+export const withIconsSnippet = `
+ }>Button
+ }>Button
+ } iconEnd={}>
+ Button
+
+`;
+
+export const disabledSnippet = `
+
+
+
+`;
+
+export const destructiveSnippet = `
+
+
+
+`;
+
+export const loadingSnippet = ``;
+
+export const asLinkSnippet = `
+
+ Button
+
+`;
diff --git a/docs-ui/src/app/components/card/components.tsx b/docs-ui/src/app/components/card/components.tsx
new file mode 100644
index 0000000000..d10e4d7bce
--- /dev/null
+++ b/docs-ui/src/app/components/card/components.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import {
+ Card,
+ CardHeader,
+ CardBody,
+ CardFooter,
+} from '../../../../../packages/ui/src/components/Card/Card';
+import { Text } from '../../../../../packages/ui/src/components/Text/Text';
+
+export const Default = () => {
+ return (
+
+ Header
+ Body
+ Footer
+
+ );
+};
+
+export const HeaderAndBody = () => {
+ return (
+
+ Header
+ Body content without a footer
+
+ );
+};
+
+export const WithLongBody = () => {
+ return (
+
+
+ Header
+
+
+
+ This is the first paragraph of a long body text that demonstrates how
+ the Card component handles extensive content. The card should adjust
+ accordingly to display all the text properly while maintaining its
+ structure.
+
+
+ Here's a second paragraph that adds more content to our card
+ body. Having multiple paragraphs helps to visualize how spacing works
+ within the card component.
+
+
+ This third paragraph continues to add more text to ensure we have a
+ proper demonstration of a card with significant content. This makes it
+ easier to test scrolling behavior and overall layout when content
+ exceeds the initial view.
+
+
+
+ Footer
+
+
+ );
+};
diff --git a/docs-ui/src/app/components/card/page.mdx b/docs-ui/src/app/components/card/page.mdx
new file mode 100644
index 0000000000..6f410fcd97
--- /dev/null
+++ b/docs-ui/src/app/components/card/page.mdx
@@ -0,0 +1,86 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import {
+ cardPropDefs,
+ cardHeaderPropDefs,
+ cardBodyPropDefs,
+ cardFooterPropDefs,
+} from './props-definition';
+import {
+ cardUsageSnippet,
+ defaultSnippet,
+ headerAndBodySnippet,
+ withLongBodySnippet,
+} from './snippets';
+import { Default, HeaderAndBody, WithLongBody } from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { CardDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+All Card components extend `HTMLDivElement` attributes.
+
+### Card
+
+
+
+### CardHeader
+
+Fixed at the top of the card.
+
+
+
+### CardBody
+
+Scrollable content area that fills available space.
+
+
+
+### CardFooter
+
+Fixed at the bottom of the card.
+
+
+
+## Examples
+
+### Header and body only
+
+Cards can omit the footer section.
+
+}
+ code={headerAndBodySnippet}
+/>
+
+### Scrollable body
+
+When body content exceeds the available height, CardBody scrolls while header and footer remain fixed.
+
+}
+ code={withLongBodySnippet}
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/card/props-definition.ts b/docs-ui/src/app/components/card/props-definition.ts
new file mode 100644
index 0000000000..b3e3776648
--- /dev/null
+++ b/docs-ui/src/app/components/card/props-definition.ts
@@ -0,0 +1,38 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+
+const optionalChildrenPropDef: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ responsive: false,
+ description: 'Content to display inside the component.',
+ },
+};
+
+export const cardPropDefs: Record = {
+ ...optionalChildrenPropDef,
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const cardHeaderPropDefs: Record = {
+ ...optionalChildrenPropDef,
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const cardBodyPropDefs: Record = {
+ ...optionalChildrenPropDef,
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const cardFooterPropDefs: Record = {
+ ...optionalChildrenPropDef,
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/content/card.props.ts b/docs-ui/src/app/components/card/snippets.ts
similarity index 50%
rename from docs-ui/src/content/card.props.ts
rename to docs-ui/src/app/components/card/snippets.ts
index 70c71bdf56..6f956e5518 100644
--- a/docs-ui/src/content/card.props.ts
+++ b/docs-ui/src/app/components/card/snippets.ts
@@ -1,30 +1,4 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- type PropDef,
-} from '@/utils/propDefs';
-
-export const cardPropDefs: Record = {
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const cardHeaderPropDefs: Record = {
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const cardBodyPropDefs: Record = {
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const cardFooterPropDefs: Record = {
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const cardUsageSnippet = `import { card } from '@backstage/ui';
+export const cardUsageSnippet = `import { Card, CardHeader, CardBody, CardFooter } from '@backstage/ui';
Header
@@ -32,13 +6,20 @@ export const cardUsageSnippet = `import { card } from '@backstage/ui';
Footer
`;
-export const cardDefaultSnippet = `
+export const defaultSnippet = `
Header
Body
Footer
`;
-export const cardLongBodySnippet = `
+export const headerAndBodySnippet = `
+ Header
+ Body content without a footer
+`;
+
+export const withLongBodySnippet = `import { Text } from '@backstage/ui';
+
+
Header
@@ -65,19 +46,3 @@ export const cardLongBodySnippet = `Footer
`;
-
-export const cardListRowSnippet = `
-
- Header
-
-
- Hello world
- Hello world
- Hello world
- Hello world
- ...
-
-
- Footer
-
-`;
diff --git a/docs-ui/src/app/components/checkbox/components.tsx b/docs-ui/src/app/components/checkbox/components.tsx
new file mode 100644
index 0000000000..a826c9e02f
--- /dev/null
+++ b/docs-ui/src/app/components/checkbox/components.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Checkbox } from '../../../../../packages/ui/src/components/Checkbox/Checkbox';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+
+export const Default = () => {
+ return Accept terms and conditions;
+};
+
+export const AllVariants = () => {
+ return (
+
+ Unchecked
+ Checked
+ Disabled
+
+ Checked & Disabled
+
+
+ );
+};
diff --git a/docs-ui/src/content/checkbox.mdx b/docs-ui/src/app/components/checkbox/page.mdx
similarity index 50%
rename from docs-ui/src/content/checkbox.mdx
rename to docs-ui/src/app/components/checkbox/page.mdx
index c574e8fed4..9657b471da 100644
--- a/docs-ui/src/content/checkbox.mdx
+++ b/docs-ui/src/app/components/checkbox/page.mdx
@@ -1,29 +1,29 @@
import { PropsTable } from '@/components/PropsTable';
-import { CheckboxSnippet } from '@/snippets/stories-snippets';
import { Snippet } from '@/components/Snippet';
import { CodeBlock } from '@/components/CodeBlock';
+import { checkboxPropDefs } from './props-definition';
import {
- checkboxPropDefs,
checkboxUsageSnippet,
- checkboxDefaultSnippet,
- checkboxVariantsSnippet,
-} from './checkbox.props';
+ defaultSnippet,
+ allVariantsSnippet,
+} from './snippets';
+import { Default, AllVariants } from './components';
import { PageTitle } from '@/components/PageTitle';
import { Theming } from '@/components/Theming';
-import { CheckboxDefinition } from '../utils/definitions';
+import { CheckboxDefinition } from '../../../utils/definitions';
import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+
+export const reactAriaUrls = {
+ checkbox: 'https://react-aria.adobe.com/Checkbox',
+};
-}
- code={checkboxDefaultSnippet}
-/>
+} code={defaultSnippet} />
## Usage
@@ -33,18 +33,18 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
## Examples
### All variants
-Here's a view when checkboxes have different variants.
-
}
- code={checkboxVariantsSnippet}
+ preview={}
+ code={allVariantsSnippet}
/>
diff --git a/docs-ui/src/app/components/checkbox/props-definition.ts b/docs-ui/src/app/components/checkbox/props-definition.ts
new file mode 100644
index 0000000000..fd4b47ff8d
--- /dev/null
+++ b/docs-ui/src/app/components/checkbox/props-definition.ts
@@ -0,0 +1,49 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+
+export const checkboxPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ required: true,
+ description: 'Label displayed next to the checkbox.',
+ },
+ isSelected: {
+ type: 'boolean',
+ description: 'Controls checked state (controlled mode).',
+ },
+ defaultSelected: {
+ type: 'boolean',
+ description: 'Initial checked state (uncontrolled mode).',
+ },
+ onChange: {
+ type: 'enum',
+ values: ['(isSelected: boolean) => void'],
+ description: 'Called when the checked state changes.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ description: 'Prevents interaction and applies disabled styling.',
+ },
+ isRequired: {
+ type: 'boolean',
+ description: 'Marks the checkbox as required for form validation.',
+ },
+ isIndeterminate: {
+ type: 'boolean',
+ description: 'Shows a mixed state, typically for "select all" checkboxes.',
+ },
+ name: {
+ type: 'string',
+ description: 'Name attribute for form submission.',
+ },
+ value: {
+ type: 'string',
+ description: 'Value attribute for form submission.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/checkbox/snippets.ts b/docs-ui/src/app/components/checkbox/snippets.ts
new file mode 100644
index 0000000000..bef496195f
--- /dev/null
+++ b/docs-ui/src/app/components/checkbox/snippets.ts
@@ -0,0 +1,12 @@
+export const checkboxUsageSnippet = `import { Checkbox } from '@backstage/ui';
+
+Accept terms`;
+
+export const defaultSnippet = `Accept terms and conditions`;
+
+export const allVariantsSnippet = `
+ Unchecked
+ Checked
+ Disabled
+ Checked & Disabled
+`;
diff --git a/docs-ui/src/app/components/container/components.tsx b/docs-ui/src/app/components/container/components.tsx
new file mode 100644
index 0000000000..a11bbd9463
--- /dev/null
+++ b/docs-ui/src/app/components/container/components.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { Container } from '../../../../../packages/ui/src/components/Container/Container';
+import { DecorativeBox } from '@/components/DecorativeBox';
+
+export const Default = () => {
+ return (
+
+ Page content goes here
+
+ );
+};
+
+export const ResponsiveSpacing = () => {
+ return (
+
+ Content with vertical spacing
+
+ );
+};
diff --git a/docs-ui/src/app/components/container/page.mdx b/docs-ui/src/app/components/container/page.mdx
new file mode 100644
index 0000000000..e0f4014a07
--- /dev/null
+++ b/docs-ui/src/app/components/container/page.mdx
@@ -0,0 +1,46 @@
+import { CodeBlock } from '@/components/CodeBlock';
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { containerPropDefs } from './props-definition';
+import {
+ containerUsageSnippet,
+ defaultSnippet,
+ containerResponsiveSnippet,
+} from './snippets';
+import { Default, ResponsiveSpacing } from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ContainerDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## Core Concepts
+
+Container provides the standard page layout for plugin content. It constrains content to a maximum width, centers it horizontally, and adds consistent horizontal gutters. Use it once per page to wrap your main content area.
+
+## API Reference
+
+
+
+## Examples
+
+### Responsive spacing
+
+Vertical spacing props accept breakpoint objects.
+
+} code={containerResponsiveSnippet} />
+
+
+
+
diff --git a/docs-ui/src/app/components/container/props-definition.ts b/docs-ui/src/app/components/container/props-definition.ts
new file mode 100644
index 0000000000..89a51eac5c
--- /dev/null
+++ b/docs-ui/src/app/components/container/props-definition.ts
@@ -0,0 +1,20 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ createSpacingGroup,
+ type PropDef,
+} from '@/utils/propDefs';
+
+export const containerPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Content to render inside the container.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+ spacing: createSpacingGroup(
+ ['my', 'mt', 'mb', 'py', 'pt', 'pb'],
+ 'Vertical spacing properties for controlling margin and padding.',
+ ),
+};
diff --git a/docs-ui/src/app/components/container/snippets.ts b/docs-ui/src/app/components/container/snippets.ts
new file mode 100644
index 0000000000..a314b52387
--- /dev/null
+++ b/docs-ui/src/app/components/container/snippets.ts
@@ -0,0 +1,13 @@
+export const containerUsageSnippet = `import { Container } from "@backstage/ui";
+
+
+ {/* Your plugin's main content */}
+`;
+
+export const defaultSnippet = `
+ Page content goes here
+`;
+
+export const containerResponsiveSnippet = `
+ Content with vertical spacing
+`;
diff --git a/docs-ui/src/app/components/dialog/components.tsx b/docs-ui/src/app/components/dialog/components.tsx
new file mode 100644
index 0000000000..18ab1bf9c5
--- /dev/null
+++ b/docs-ui/src/app/components/dialog/components.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import {
+ Dialog,
+ DialogTrigger,
+ DialogHeader,
+ DialogBody,
+ DialogFooter,
+} from '../../../../../packages/ui/src/components/Dialog/Dialog';
+import { Button } from '../../../../../packages/ui/src/components/Button/Button';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { Text } from '../../../../../packages/ui/src/components/Text/Text';
+import { TextField } from '../../../../../packages/ui/src/components/TextField/TextField';
+import { Select } from '../../../../../packages/ui/src/components/Select/Select';
+
+export const Default = () => (
+
+
+
+
+);
+
+export const PreviewFixedWidthAndHeight = () => (
+
+
+
+
+);
+
+export const PreviewWithForm = () => (
+
+
+
+
+);
diff --git a/docs-ui/src/content/dialog.mdx b/docs-ui/src/app/components/dialog/page.mdx
similarity index 69%
rename from docs-ui/src/content/dialog.mdx
rename to docs-ui/src/app/components/dialog/page.mdx
index e1e4ec436e..12ce2d4135 100644
--- a/docs-ui/src/content/dialog.mdx
+++ b/docs-ui/src/app/components/dialog/page.mdx
@@ -1,35 +1,46 @@
import { PropsTable } from '@/components/PropsTable';
import { Snippet } from '@/components/Snippet';
import { CodeBlock } from '@/components/CodeBlock';
-import { DialogSnippet } from '@/snippets/stories-snippets';
+import {
+ Default,
+ PreviewFixedWidthAndHeight,
+ PreviewWithForm,
+} from './components';
import {
dialogPropDefs,
dialogTriggerPropDefs,
dialogHeaderPropDefs,
dialogBodyPropDefs,
dialogFooterPropDefs,
- dialogClosePropDefs,
+} from './props-definition';
+import {
dialogUsageSnippet,
dialogDefaultSnippet,
dialogFixedWidthAndHeightSnippet,
dialogWithFormSnippet,
dialogWithNoTriggerSnippet,
dialogCloseSnippet,
-} from './dialog.props';
+} from './snippets';
import { PageTitle } from '@/components/PageTitle';
import { Theming } from '@/components/Theming';
-import { DialogDefinition } from '../utils/definitions';
+import { DialogDefinition } from '../../../utils/definitions';
import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+
+export const reactAriaUrls = {
+ dialogTrigger: 'https://react-aria.adobe.com/Modal#dialogtrigger',
+ modal: 'https://react-aria.adobe.com/Modal',
+};
}
+ preview={}
code={dialogDefaultSnippet}
/>
@@ -45,18 +56,27 @@ Wraps a trigger element and the dialog content to handle open/close state.
+
+
### Dialog
The main dialog container that renders as a modal overlay.
+
+
### DialogHeader
Displays the dialog title with a built-in close button.
+
+
### DialogBody
The main content area of the dialog with optional scrolling.
@@ -82,18 +102,18 @@ Dialog with a fixed height body that scrolls when content overflows.
}
+ preview={}
code={dialogFixedWidthAndHeightSnippet}
/>
### Dialog with Form
-Dialog containing form elements for user input.
+Forms can be embedded in the dialog body.
}
+ preview={}
code={dialogWithFormSnippet}
/>
diff --git a/docs-ui/src/app/components/dialog/props-definition.ts b/docs-ui/src/app/components/dialog/props-definition.ts
new file mode 100644
index 0000000000..d5f2037f22
--- /dev/null
+++ b/docs-ui/src/app/components/dialog/props-definition.ts
@@ -0,0 +1,92 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+
+export const dialogTriggerPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Trigger element and dialog content.',
+ },
+ isOpen: {
+ type: 'boolean',
+ description: 'Whether the overlay is open by default (controlled).',
+ },
+ defaultOpen: {
+ type: 'boolean',
+ description: 'Whether the overlay is open by default (uncontrolled).',
+ },
+ onOpenChange: {
+ type: 'enum',
+ values: ['(isOpen: boolean) => void'],
+ description:
+ "Handler that is called when the overlay's open state changes.",
+ },
+};
+
+export const dialogPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Dialog content (DialogHeader, DialogBody, DialogFooter).',
+ },
+ isOpen: {
+ type: 'boolean',
+ description: 'Whether the overlay is open (controlled mode).',
+ },
+ defaultOpen: {
+ type: 'boolean',
+ description: 'Initial open state (uncontrolled mode).',
+ },
+ onOpenChange: {
+ type: 'enum',
+ values: ['(isOpen: boolean) => void'],
+ description: 'Called when the open state changes.',
+ },
+ width: {
+ type: 'enum',
+ values: ['number', 'string'],
+ default: '400',
+ description: 'Fixed width in pixels (number) or CSS units (string).',
+ },
+ height: {
+ type: 'enum',
+ values: ['number', 'string'],
+ default: 'auto',
+ description: 'Fixed height in pixels (number) or CSS units (string).',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const dialogHeaderPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Dialog title text.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const dialogBodyPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Main content of the dialog.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const dialogFooterPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Action buttons or footer content.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/dialog/snippets.ts b/docs-ui/src/app/components/dialog/snippets.ts
new file mode 100644
index 0000000000..440ff417e8
--- /dev/null
+++ b/docs-ui/src/app/components/dialog/snippets.ts
@@ -0,0 +1,86 @@
+export const dialogUsageSnippet = `import {
+ Dialog,
+ DialogTrigger,
+ DialogHeader,
+ DialogBody,
+ DialogFooter,
+} from '@backstage/ui';
+
+
+
+
+`;
+
+export const dialogDefaultSnippet = `
+
+
+`;
+
+export const dialogFixedWidthAndHeightSnippet = `
+
+
+`;
+
+export const dialogWithFormSnippet = `
+
+
+`;
+
+export const dialogWithNoTriggerSnippet = `const [isOpen, setIsOpen] = useState(false);
+
+`;
+
+export const dialogCloseSnippet = ``;
diff --git a/docs-ui/src/app/components/flex/components.tsx b/docs-ui/src/app/components/flex/components.tsx
new file mode 100644
index 0000000000..ce6cc8c05f
--- /dev/null
+++ b/docs-ui/src/app/components/flex/components.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { DecorativeBox } from '@/components/DecorativeBox';
+
+export const Default = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export const DirectionExample = () => {
+ return (
+
+ First
+ Second
+ Third
+
+ );
+};
+
+export const ResponsiveExample = () => {
+ return (
+
+ 1
+ 2
+ 3
+
+ );
+};
+
+export const AlignExample = () => {
+ return (
+
+ Start
+ Middle
+ End
+
+ );
+};
diff --git a/docs-ui/src/app/components/flex/page.mdx b/docs-ui/src/app/components/flex/page.mdx
new file mode 100644
index 0000000000..f321b54583
--- /dev/null
+++ b/docs-ui/src/app/components/flex/page.mdx
@@ -0,0 +1,75 @@
+import { PropsTable } from '@/components/PropsTable';
+import { CodeBlock } from '@/components/CodeBlock';
+import { Snippet } from '@/components/Snippet';
+import { flexPropDefs } from './props-definition';
+import {
+ flexUsageSnippet,
+ defaultSnippet,
+ flexResponsiveSnippet,
+ flexAlignSnippet,
+ flexDirectionSnippet,
+} from './snippets';
+import {
+ Default,
+ ResponsiveExample,
+ AlignExample,
+ DirectionExample,
+} from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { FlexDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+
+
+## Examples
+
+### Direction
+
+}
+ code={flexDirectionSnippet}
+ layout="side-by-side"
+/>
+
+### Responsive gap
+
+Gap values can be responsive using breakpoint objects.
+
+}
+ code={flexResponsiveSnippet}
+ layout="side-by-side"
+/>
+
+### Alignment
+
+}
+ code={flexAlignSnippet}
+ layout="side-by-side"
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/flex/props-definition.tsx b/docs-ui/src/app/components/flex/props-definition.tsx
new file mode 100644
index 0000000000..2136dd0498
--- /dev/null
+++ b/docs-ui/src/app/components/flex/props-definition.tsx
@@ -0,0 +1,66 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ gapPropDefs,
+ spacingGroupAll,
+ type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const flexPropDefs: Record = {
+ direction: {
+ type: 'enum',
+ values: ['row', 'column', 'row-reverse', 'column-reverse'],
+ responsive: true,
+ description: (
+ <>
+ Main axis direction. Use row for horizontal,{' '}
+ column for vertical layouts.
+
+ ),
+ },
+ align: {
+ type: 'enum',
+ values: ['start', 'center', 'end', 'baseline', 'stretch'],
+ responsive: true,
+ description:
+ 'Cross-axis alignment. Controls how children align perpendicular to the main axis.',
+ },
+ justify: {
+ type: 'enum',
+ values: ['start', 'center', 'end', 'between'],
+ responsive: true,
+ description: (
+ <>
+ Main-axis distribution. Use between to space children
+ evenly with no edge gaps.
+
+ ),
+ },
+ gap: {
+ ...gapPropDefs.gap,
+ default: '4',
+ description:
+ 'Space between children. Accepts spacing scale values or responsive objects.',
+ },
+ surface: {
+ type: 'enum',
+ values: ['0', '1', '2', '3', 'danger', 'warning', 'success', 'auto'],
+ responsive: true,
+ description: (
+ <>
+ Surface level for theming. Use auto to increment from
+ parent context.
+
+ ),
+ },
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ responsive: false,
+ description: 'Content to render inside the flex container.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+ spacing: spacingGroupAll,
+};
diff --git a/docs-ui/src/app/components/flex/snippets.ts b/docs-ui/src/app/components/flex/snippets.ts
new file mode 100644
index 0000000000..8770880c79
--- /dev/null
+++ b/docs-ui/src/app/components/flex/snippets.ts
@@ -0,0 +1,31 @@
+export const flexUsageSnippet = `import { Flex } from '@backstage/ui';
+
+
+ Item 1
+ Item 2
+ Item 3
+`;
+
+export const defaultSnippet = `
+
+
+
+`;
+
+export const flexDirectionSnippet = `
+ First
+ Second
+ Third
+`;
+
+export const flexResponsiveSnippet = `
+ 1
+ 2
+ 3
+`;
+
+export const flexAlignSnippet = `
+ Start
+ Middle
+ End
+`;
diff --git a/docs-ui/src/app/components/grid/components.tsx b/docs-ui/src/app/components/grid/components.tsx
new file mode 100644
index 0000000000..0c0e5a0546
--- /dev/null
+++ b/docs-ui/src/app/components/grid/components.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { Grid } from '../../../../../packages/ui/src/components/Grid/Grid';
+import { DecorativeBox } from '@/components/DecorativeBox';
+
+export const Default = () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export const ResponsiveExample = () => {
+ return (
+
+ 1
+ 2
+ 3
+ 4
+
+ );
+};
+
+export const GridItemExample = () => {
+ return (
+
+
+ Spans 2 columns
+
+ 1 column
+ 1 column
+
+ );
+};
diff --git a/docs-ui/src/app/components/grid/page.mdx b/docs-ui/src/app/components/grid/page.mdx
new file mode 100644
index 0000000000..8862586830
--- /dev/null
+++ b/docs-ui/src/app/components/grid/page.mdx
@@ -0,0 +1,64 @@
+import { CodeBlock } from '@/components/CodeBlock';
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { gridPropDefs, gridItemPropDefs } from './props-definition';
+import {
+ gridUsageSnippet,
+ defaultSnippet,
+ gridResponsiveSnippet,
+ gridItemSnippet,
+} from './snippets';
+import { Default, ResponsiveExample, GridItemExample } from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { GridDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+### Grid.Root
+
+The grid container. Defines column count and gap between items.
+
+
+
+### Grid.Item
+
+A grid child with column and row spanning control.
+
+
+
+## Examples
+
+### Responsive columns
+
+Column count can change at different breakpoints.
+
+}
+ code={gridResponsiveSnippet}
+ open
+/>
+
+### Column spanning
+
+Use Grid.Item to span multiple columns.
+
+} code={gridItemSnippet} open />
+
+
+
+
diff --git a/docs-ui/src/app/components/grid/props-definition.tsx b/docs-ui/src/app/components/grid/props-definition.tsx
new file mode 100644
index 0000000000..4622f8f614
--- /dev/null
+++ b/docs-ui/src/app/components/grid/props-definition.tsx
@@ -0,0 +1,115 @@
+import {
+ childrenPropDefs,
+ classNamePropDefs,
+ gapPropDefs,
+ stylePropDefs,
+ spacingGroupAll,
+ type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+const columnValues = [
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ 'auto',
+];
+
+const surfaceValues = [
+ '0',
+ '1',
+ '2',
+ '3',
+ 'danger',
+ 'warning',
+ 'success',
+ 'auto',
+];
+
+export const gridPropDefs: Record = {
+ columns: {
+ type: 'enum',
+ values: columnValues,
+ default: 'auto',
+ responsive: true,
+ description: (
+ <>
+ Number of columns. Use 1-12 for fixed layouts, auto to fit
+ content.
+
+ ),
+ },
+ gap: {
+ ...gapPropDefs.gap,
+ default: '4',
+ description:
+ 'Space between items. Use higher values for separated layouts, lower for compact.',
+ },
+ surface: {
+ type: 'enum',
+ values: surfaceValues,
+ responsive: true,
+ description: (
+ <>
+ Surface level for theming. Use auto to increment from
+ parent context.
+
+ ),
+ },
+ ...childrenPropDefs,
+ ...classNamePropDefs,
+ ...stylePropDefs,
+ spacing: spacingGroupAll,
+};
+
+export const gridItemPropDefs: Record = {
+ colSpan: {
+ type: 'enum',
+ values: columnValues,
+ responsive: true,
+ description: 'Number of columns the item spans across.',
+ },
+ colStart: {
+ type: 'enum',
+ values: columnValues,
+ responsive: true,
+ description:
+ 'Starting column position. Use with colEnd for explicit placement.',
+ },
+ colEnd: {
+ type: 'enum',
+ values: columnValues,
+ responsive: true,
+ description:
+ 'Ending column position. Use with colStart for explicit placement.',
+ },
+ rowSpan: {
+ type: 'enum',
+ values: columnValues,
+ responsive: true,
+ description: 'Number of rows the item spans. Useful for tall content.',
+ },
+ surface: {
+ type: 'enum',
+ values: surfaceValues,
+ responsive: true,
+ description: (
+ <>
+ Surface level for theming. Use auto to increment from
+ parent context.
+
+ ),
+ },
+ ...childrenPropDefs,
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/grid/snippets.ts b/docs-ui/src/app/components/grid/snippets.ts
new file mode 100644
index 0000000000..2915a2ba4b
--- /dev/null
+++ b/docs-ui/src/app/components/grid/snippets.ts
@@ -0,0 +1,31 @@
+export const gridUsageSnippet = `import { Grid } from '@backstage/ui';
+
+
+ Item 1
+ Item 2
+ Item 3
+`;
+
+export const defaultSnippet = `
+
+
+
+
+
+
+`;
+
+export const gridResponsiveSnippet = `
+ 1
+ 2
+ 3
+ 4
+`;
+
+export const gridItemSnippet = `
+
+ Spans 2 columns
+
+ 1 column
+ 1 column
+`;
diff --git a/docs-ui/src/app/components/header-page/components.tsx b/docs-ui/src/app/components/header-page/components.tsx
new file mode 100644
index 0000000000..791afc5bbe
--- /dev/null
+++ b/docs-ui/src/app/components/header-page/components.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { HeaderPage } from '../../../../../packages/ui/src/components/HeaderPage/HeaderPage';
+import { Button } from '../../../../../packages/ui/src/components/Button/Button';
+import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
+import {
+ MenuTrigger,
+ Menu,
+ MenuItem,
+} from '../../../../../packages/ui/src/components/Menu/Menu';
+import { MemoryRouter } from 'react-router-dom';
+import { RiMore2Line } from '@remixicon/react';
+
+const tabs = [
+ { id: 'overview', label: 'Overview', href: '/overview' },
+ { id: 'checks', label: 'Checks', href: '/checks' },
+ { id: 'tracks', label: 'Tracks', href: '/tracks' },
+ { id: 'campaigns', label: 'Campaigns', href: '/campaigns' },
+ { id: 'integrations', label: 'Integrations', href: '/integrations' },
+];
+
+const breadcrumbs = [
+ { label: 'Home', href: '/' },
+ { label: 'Long Breadcrumb Name', href: '/long-breadcrumb' },
+ { label: 'Another Long Breadcrumb', href: '/another-long-breadcrumb' },
+ {
+ label: 'Yet Another Long Breadcrumb',
+ href: '/yet-another-long-breadcrumb',
+ },
+];
+
+export const WithEverything = () => (
+
+
+
+
+
+ }
+ />
+
+);
+
+export const WithLongBreadcrumbs = () => (
+
+
+
+);
+
+export const WithTabs = () => (
+
+
+
+);
+
+export const WithCustomActions = () => (
+
+ Custom action}
+ />
+
+);
+
+export const WithMenu = () => (
+
+
+ } />
+
+
+ }
+ />
+
+);
diff --git a/docs-ui/src/app/components/header-page/page.mdx b/docs-ui/src/app/components/header-page/page.mdx
new file mode 100644
index 0000000000..ac99fb1af0
--- /dev/null
+++ b/docs-ui/src/app/components/header-page/page.mdx
@@ -0,0 +1,66 @@
+import { PropsTable } from '@/components/PropsTable';
+import { CodeBlock } from '@/components/CodeBlock';
+import { Snippet } from '@/components/Snippet';
+import {
+ WithEverything,
+ WithLongBreadcrumbs,
+ WithTabs,
+ WithCustomActions,
+ WithMenu,
+} from './components';
+import { headerPagePropDefs } from './props-definition';
+import {
+ usage,
+ defaultSnippet,
+ withTabs,
+ withBreadcrumbs,
+ withCustomActions,
+ withMenu,
+} from './snippets';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { HeaderPageDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+
+
+## Examples
+
+### Breadcrumbs
+
+Labels are truncated at 240px.
+
+} code={withBreadcrumbs} />
+
+### Tabs
+
+Tabs use React Router and highlight based on the current route.
+
+} code={withTabs} />
+
+### Custom actions
+
+} code={withCustomActions} />
+
+### With menu
+
+Use `customActions` to add a dropdown menu.
+
+} code={withMenu} />
+
+
+
+
diff --git a/docs-ui/src/app/components/header-page/props-definition.tsx b/docs-ui/src/app/components/header-page/props-definition.tsx
new file mode 100644
index 0000000000..393141870f
--- /dev/null
+++ b/docs-ui/src/app/components/header-page/props-definition.tsx
@@ -0,0 +1,69 @@
+import { classNamePropDefs, type PropDef } from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const headerPagePropDefs: Record = {
+ title: {
+ type: 'string',
+ description: 'Page heading displayed in the header.',
+ },
+ customActions: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Custom elements rendered in the actions area.',
+ },
+ tabs: {
+ type: 'complex',
+ description: 'Navigation tabs displayed below the title.',
+ complexType: {
+ name: 'HeaderTab[]',
+ properties: {
+ id: {
+ type: 'string',
+ required: true,
+ description: 'Unique identifier for the tab.',
+ },
+ label: {
+ type: 'string',
+ required: true,
+ description: 'Display text for the tab.',
+ },
+ href: {
+ type: 'string',
+ required: true,
+ description: 'URL to navigate to when tab is clicked.',
+ },
+ matchStrategy: {
+ type: "'exact' | 'prefix'",
+ required: false,
+ default: "'exact'",
+ description: (
+ <>
+ Route matching strategy. Use exact for exact path
+ match, prefix if pathname starts with href.
+
+ ),
+ },
+ },
+ },
+ },
+ breadcrumbs: {
+ type: 'complex',
+ description: 'Breadcrumb trail displayed above the title.',
+ complexType: {
+ name: 'HeaderPageBreadcrumb[]',
+ properties: {
+ label: {
+ type: 'string',
+ required: true,
+ description: 'Display text for the breadcrumb. Truncated at 240px.',
+ },
+ href: {
+ type: 'string',
+ required: true,
+ description: 'URL for the breadcrumb link.',
+ },
+ },
+ },
+ },
+ ...classNamePropDefs,
+};
diff --git a/docs-ui/src/app/components/header-page/snippets.ts b/docs-ui/src/app/components/header-page/snippets.ts
new file mode 100644
index 0000000000..607675717c
--- /dev/null
+++ b/docs-ui/src/app/components/header-page/snippets.ts
@@ -0,0 +1,56 @@
+export const usage = `import { HeaderPage } from '@backstage/ui';
+
+`;
+
+export const defaultSnippet = `
+
+
+
+ }
+/>`;
+
+export const withBreadcrumbs = ``;
+
+export const withTabs = ``;
+
+export const withCustomActions = `Custom action}
+/>`;
+
+export const withMenu = `
+ } />
+
+
+ }
+/>`;
diff --git a/docs-ui/src/app/components/link/components.tsx b/docs-ui/src/app/components/link/components.tsx
new file mode 100644
index 0000000000..320dd52517
--- /dev/null
+++ b/docs-ui/src/app/components/link/components.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { Link } from '../../../../../packages/ui/src/components/Link/Link';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { MemoryRouter } from 'react-router-dom';
+
+export const Default = () => {
+ return (
+
+
+ Sign up for Backstage
+
+
+ );
+};
+
+export const ExternalLink = () => {
+ return (
+
+
+ Sign up for Backstage
+
+
+ );
+};
+
+export const AllVariants = () => {
+ return (
+
+
+
+ title-large
+
+
+ title-medium
+
+
+ title-small
+
+
+ title-x-small
+
+
+ body-large
+
+
+ body-medium
+
+
+ body-small
+
+
+ body-x-small
+
+
+
+ );
+};
+
+export const AllColors = () => {
+ return (
+
+
+
+ Primary
+
+
+ Secondary
+
+
+ Danger
+
+
+ Warning
+
+
+ Success
+
+
+ Info
+
+
+
+ );
+};
+
+export const Weight = () => {
+ return (
+
+
+
+ Regular
+
+
+ Bold
+
+
+
+ );
+};
+
+export const Standalone = () => {
+ return (
+
+
+
+ Default link
+
+
+ Standalone link
+
+
+
+ );
+};
diff --git a/docs-ui/src/app/components/link/page.mdx b/docs-ui/src/app/components/link/page.mdx
new file mode 100644
index 0000000000..8715bb270b
--- /dev/null
+++ b/docs-ui/src/app/components/link/page.mdx
@@ -0,0 +1,107 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+import { linkPropDefs } from './props-definition';
+import {
+ linkUsageSnippet,
+ defaultSnippet,
+ externalLinkSnippet,
+ allVariantsSnippet,
+ allColorsSnippet,
+ weightSnippet,
+ standaloneSnippet,
+} from './snippets';
+import {
+ Default,
+ ExternalLink,
+ AllVariants,
+ AllColors,
+ Weight,
+ Standalone,
+} from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { LinkDefinition } from '../../../utils/definitions';
+
+export const reactAriaUrls = {
+ link: 'https://react-aria.adobe.com/Link',
+};
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+
+
+
+
+## Examples
+
+### External link
+
+Use `target="_blank"` to open links in a new tab.
+
+}
+ code={externalLinkSnippet}
+ layout="side-by-side"
+/>
+
+### Variants
+
+}
+ code={allVariantsSnippet}
+/>
+
+### Colors
+
+Status colors for contextual links.
+
+}
+ code={allColorsSnippet}
+/>
+
+### Weight
+
+}
+ code={weightSnippet}
+ layout="side-by-side"
+/>
+
+### Standalone
+
+Use `standalone` to remove the underline by default. The underline will appear on hover.
+
+}
+ code={standaloneSnippet}
+ layout="side-by-side"
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/link/props-definition.tsx b/docs-ui/src/app/components/link/props-definition.tsx
new file mode 100644
index 0000000000..f0aa95114e
--- /dev/null
+++ b/docs-ui/src/app/components/link/props-definition.tsx
@@ -0,0 +1,79 @@
+import {
+ childrenPropDefs,
+ classNamePropDefs,
+ stylePropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const linkPropDefs: Record = {
+ href: {
+ type: 'string',
+ description:
+ 'URL the link navigates to. Supports internal and external URLs.',
+ },
+ target: {
+ type: 'enum',
+ values: ['_self', '_blank', '_parent', '_top'],
+ description: (
+ <>
+ Where to open the link. Use _blank for external links that
+ open in new tabs.
+
+ ),
+ },
+ title: {
+ type: 'string',
+ description: 'Tooltip text shown on hover. Useful for accessibility.',
+ },
+ variant: {
+ type: 'enum',
+ values: [
+ 'title-large',
+ 'title-medium',
+ 'title-small',
+ 'title-x-small',
+ 'body-large',
+ 'body-medium',
+ 'body-small',
+ 'body-x-small',
+ ],
+ default: 'body',
+ responsive: true,
+ description:
+ 'Typography style. Title variants for headings, body for paragraph text.',
+ },
+ weight: {
+ type: 'enum',
+ values: ['regular', 'bold'],
+ default: 'regular',
+ responsive: true,
+ description: (
+ <>
+ Font weight. Use bold for emphasis.
+
+ ),
+ },
+ color: {
+ type: 'enum',
+ values: ['primary', 'secondary', 'danger', 'warning', 'success'],
+ default: 'primary',
+ responsive: true,
+ description:
+ 'Text color. Status colors (danger, warning, success) for contextual links.',
+ },
+ truncate: {
+ type: 'boolean',
+ description:
+ 'Truncates text with ellipsis when it overflows its container.',
+ default: 'false',
+ },
+ standalone: {
+ type: 'boolean',
+ description: 'Removes underline by default. Underline appears on hover.',
+ default: 'false',
+ },
+ ...childrenPropDefs,
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/app/components/link/snippets.ts b/docs-ui/src/app/components/link/snippets.ts
new file mode 100644
index 0000000000..386ad9f1a0
--- /dev/null
+++ b/docs-ui/src/app/components/link/snippets.ts
@@ -0,0 +1,39 @@
+export const linkUsageSnippet = `import { Link } from '@backstage/ui';
+
+Sign up for Backstage`;
+
+export const defaultSnippet = `Sign up for Backstage`;
+
+export const externalLinkSnippet = `
+ Sign up for Backstage
+`;
+
+export const allVariantsSnippet = `
+ title-large
+ title-medium
+ title-small
+ title-x-small
+ body-large
+ body-medium
+ body-small
+ body-x-small
+`;
+
+export const allColorsSnippet = `
+ Primary
+ Secondary
+ Danger
+ Warning
+ Success
+ Info
+`;
+
+export const weightSnippet = `
+ Regular
+ Bold
+`;
+
+export const standaloneSnippet = `
+ Default link
+ Standalone link
+`;
diff --git a/docs-ui/src/app/components/menu/components.tsx b/docs-ui/src/app/components/menu/components.tsx
new file mode 100644
index 0000000000..fbb481f5ef
--- /dev/null
+++ b/docs-ui/src/app/components/menu/components.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import {
+ MenuTrigger,
+ Menu,
+ MenuItem,
+ MenuSection,
+ MenuSeparator,
+ SubmenuTrigger,
+ MenuAutocomplete,
+ MenuAutocompleteListbox,
+ MenuListBoxItem,
+} from '../../../../../packages/ui/src/components/Menu/Menu';
+import { Button } from '../../../../../packages/ui/src/components/Button/Button';
+import { MemoryRouter } from 'react-router-dom';
+import {
+ RiChat1Line,
+ RiFileLine,
+ RiFolderLine,
+ RiImageLine,
+ RiSettingsLine,
+ RiShareBoxLine,
+} from '@remixicon/react';
+
+export const Preview = () => (
+
+
+
+
+
+
+);
+
+export const PreviewSubmenu = () => (
+
+
+
+
+
+
+);
+
+export const PreviewIcons = () => (
+
+
+
+
+
+
+);
+
+export const PreviewLinks = () => (
+
+
+
+
+
+
+);
+
+export const PreviewSections = () => (
+
+
+
+
+
+
+);
+
+export const PreviewSeparators = () => (
+
+
+
+
+
+
+);
+
+export const PreviewAutocompleteMenu = () => (
+
+
+
+
+
+
+
+
+
+
+);
+
+export const PreviewAutocompleteListbox = () => (
+
+
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+
+);
+
+export const PreviewAutocompleteListboxMultiple = () => (
+
+
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+
+);
diff --git a/docs-ui/src/app/components/menu/page.mdx b/docs-ui/src/app/components/menu/page.mdx
new file mode 100644
index 0000000000..f1de264d73
--- /dev/null
+++ b/docs-ui/src/app/components/menu/page.mdx
@@ -0,0 +1,229 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import {
+ Preview,
+ PreviewSubmenu,
+ PreviewIcons,
+ PreviewLinks,
+ PreviewSections,
+ PreviewSeparators,
+ PreviewAutocompleteMenu,
+ PreviewAutocompleteListbox,
+ PreviewAutocompleteListboxMultiple,
+} from './components';
+import {
+ menuTriggerPropDefs,
+ submenuTriggerPropDefs,
+ menuPropDefs,
+ menuListBoxPropDefs,
+ menuAutocompletePropDefs,
+ menuAutocompleteListboxPropDefs,
+ menuItemPropDefs,
+ menuListBoxItemPropDefs,
+ menuSectionPropDefs,
+ menuSeparatorPropDefs,
+} from './props-definition';
+import {
+ usage,
+ preview,
+ submenu,
+ icons,
+ sections,
+ separators,
+ links,
+ autocomplete,
+ autocompleteListbox,
+ autocompleteListboxMultiple,
+} from './snippets';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { MenuDefinition } from '../../../utils/definitions';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+
+export const reactAriaUrls = {
+ menuTrigger: 'https://react-aria.adobe.com/Menu#menutrigger',
+ submenuTrigger: 'https://react-aria.adobe.com/Menu#submenutrigger',
+ menu: 'https://react-aria.adobe.com/Menu',
+ menuItem: 'https://react-aria.adobe.com/Menu#menuitem',
+ menuSection: 'https://react-aria.adobe.com/Menu#menusection',
+ listBox: 'https://react-aria.adobe.com/ListBox',
+ listBoxItem: 'https://react-aria.adobe.com/ListBox#listboxitem',
+};
+
+
+
+} code={preview} />
+
+## Usage
+
+
+
+### Triggers
+
+- `MenuTrigger` combines a trigger element with a menu popover.
+- `SubmenuTrigger` combines a `MenuItem` with a nested submenu.
+
+### Containers
+
+- `Menu` contains menu items or sections.
+- `MenuListBox` supports selection with checkmarks.
+- `MenuAutocomplete` adds a search input to filter items.
+- `MenuAutocompleteListbox` combines search with selection.
+
+### Items
+
+- `MenuItem` is an interactive action in the menu.
+- `MenuListBoxItem` is a selectable item in a list box.
+
+### Grouping
+
+- `MenuSection` groups items with a title.
+- `MenuSeparator` adds a horizontal divider.
+
+## API reference
+
+### MenuTrigger
+
+Accepts two children: the trigger element and a menu container.
+
+
+
+
+
+### SubmenuTrigger
+
+Accepts two children: a `MenuItem` and a menu container.
+
+
+
+
+
+### Menu
+
+
+
+
+
+### MenuListBox
+
+
+
+
+
+### MenuAutocomplete
+
+
+
+
+
+### MenuAutocompleteListbox
+
+
+
+
+
+### MenuItem
+
+
+
+
+
+### MenuListBoxItem
+
+
+
+
+
+### MenuSection
+
+
+
+
+
+### MenuSeparator
+
+
+
+
+
+## Examples
+
+### Nested navigation
+
+Submenus open to the right of their parent item.
+
+}
+ code={submenu}
+/>
+
+### With icons
+
+} code={icons} />
+
+### With links
+
+The `href` prop works with both internal and external links.
+
+} code={links} />
+
+### With sections
+
+}
+ code={sections}
+/>
+
+### With separators
+
+}
+ code={separators}
+/>
+
+### With autocomplete
+
+}
+ code={autocomplete}
+/>
+
+### With list box
+
+}
+ code={autocompleteListbox}
+/>
+
+### Multiple selection
+
+Set `selectionMode="multiple"` to allow multiple selections.
+
+}
+ code={autocompleteListboxMultiple}
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/menu/props-definition.tsx b/docs-ui/src/app/components/menu/props-definition.tsx
new file mode 100644
index 0000000000..5e11b22737
--- /dev/null
+++ b/docs-ui/src/app/components/menu/props-definition.tsx
@@ -0,0 +1,364 @@
+import { classNamePropDefs, type PropDef } from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const menuTriggerPropDefs: Record = {
+ isOpen: {
+ type: 'boolean',
+ description: 'Controlled open state of the menu.',
+ },
+ defaultOpen: {
+ type: 'boolean',
+ description: 'Whether the menu is open by default.',
+ },
+ onOpenChange: {
+ type: 'enum',
+ values: ['(isOpen: boolean) => void'],
+ description: 'Handler called when the open state changes.',
+ },
+};
+
+export const submenuTriggerPropDefs: Record = {
+ delay: {
+ type: 'number',
+ default: '200',
+ description: 'Delay in milliseconds before the submenu opens on hover.',
+ },
+};
+
+export const menuPropDefs: Record = {
+ placement: {
+ type: 'enum',
+ values: [
+ 'top',
+ 'bottom',
+ 'left',
+ 'right',
+ 'top start',
+ 'top end',
+ 'bottom start',
+ 'bottom end',
+ 'left start',
+ 'left end',
+ 'right start',
+ 'right end',
+ ],
+ description: 'Position of the menu relative to the trigger.',
+ },
+ onAction: {
+ type: 'enum',
+ values: ['(key: Key) => void'],
+ description:
+ 'Handler called when an item is activated. Receives the item key.',
+ },
+ selectionMode: {
+ type: 'enum',
+ values: ['none', 'single', 'multiple'],
+ description: 'How items can be selected.',
+ },
+ selectedKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Controlled selected keys.',
+ },
+ defaultSelectedKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Default selected keys for uncontrolled usage.',
+ },
+ disabledKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Keys of items that are disabled.',
+ },
+ virtualized: {
+ type: 'boolean',
+ default: false,
+ description: 'Enable virtualization for large lists.',
+ },
+ maxWidth: {
+ type: 'string',
+ description: 'Maximum width of the menu popover.',
+ },
+ maxHeight: {
+ type: 'string',
+ description: 'Maximum height of the menu popover.',
+ },
+ ...classNamePropDefs,
+};
+
+export const menuListBoxPropDefs: Record = {
+ placement: {
+ type: 'enum',
+ values: [
+ 'top',
+ 'bottom',
+ 'left',
+ 'right',
+ 'top start',
+ 'top end',
+ 'bottom start',
+ 'bottom end',
+ 'left start',
+ 'left end',
+ 'right start',
+ 'right end',
+ ],
+ description: 'Position of the list box relative to the trigger.',
+ },
+ selectionMode: {
+ type: 'enum',
+ values: ['none', 'single', 'multiple'],
+ description: 'How items can be selected.',
+ },
+ selectedKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Controlled selected keys.',
+ },
+ defaultSelectedKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Default selected keys for uncontrolled usage.',
+ },
+ onSelectionChange: {
+ type: 'enum',
+ values: ['(keys: Selection) => void'],
+ description: 'Handler called when selection changes.',
+ },
+ disabledKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Keys of items that are disabled.',
+ },
+ virtualized: {
+ type: 'boolean',
+ default: false,
+ description: 'Enable virtualization for large lists.',
+ },
+ maxWidth: {
+ type: 'string',
+ description: 'Maximum width of the list box popover.',
+ },
+ maxHeight: {
+ type: 'string',
+ description: 'Maximum height of the list box popover.',
+ },
+ ...classNamePropDefs,
+};
+
+export const menuAutocompletePropDefs: Record = {
+ placeholder: {
+ type: 'string',
+ description: 'Placeholder text for the search input.',
+ },
+ placement: {
+ type: 'enum',
+ values: [
+ 'top',
+ 'bottom',
+ 'left',
+ 'right',
+ 'top start',
+ 'top end',
+ 'bottom start',
+ 'bottom end',
+ 'left start',
+ 'left end',
+ 'right start',
+ 'right end',
+ ],
+ description: 'Position of the menu relative to the trigger.',
+ },
+ onAction: {
+ type: 'enum',
+ values: ['(key: Key) => void'],
+ description:
+ 'Handler called when an item is activated. Receives the item key.',
+ },
+ selectionMode: {
+ type: 'enum',
+ values: ['none', 'single', 'multiple'],
+ description: 'How items can be selected.',
+ },
+ selectedKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Controlled selected keys.',
+ },
+ defaultSelectedKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Default selected keys for uncontrolled usage.',
+ },
+ disabledKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Keys of items that are disabled.',
+ },
+ onSelectionChange: {
+ type: 'enum',
+ values: ['(keys: Selection) => void'],
+ description: 'Handler called when selection changes.',
+ },
+ virtualized: {
+ type: 'boolean',
+ default: false,
+ description: 'Enable virtualization for large lists.',
+ },
+ maxWidth: {
+ type: 'string',
+ description: 'Maximum width of the menu popover.',
+ },
+ maxHeight: {
+ type: 'string',
+ description: 'Maximum height of the menu popover.',
+ },
+ ...classNamePropDefs,
+};
+
+export const menuAutocompleteListboxPropDefs: Record = {
+ placeholder: {
+ type: 'string',
+ description: 'Placeholder text for the search input.',
+ },
+ placement: {
+ type: 'enum',
+ values: [
+ 'top',
+ 'bottom',
+ 'left',
+ 'right',
+ 'top start',
+ 'top end',
+ 'bottom start',
+ 'bottom end',
+ 'left start',
+ 'left end',
+ 'right start',
+ 'right end',
+ ],
+ description: 'Position of the list box relative to the trigger.',
+ },
+ selectionMode: {
+ type: 'enum',
+ values: ['none', 'single', 'multiple'],
+ description: 'How items can be selected.',
+ },
+ selectedKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Controlled selected keys.',
+ },
+ defaultSelectedKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Default selected keys for uncontrolled usage.',
+ },
+ onSelectionChange: {
+ type: 'enum',
+ values: ['(keys: Selection) => void'],
+ description: 'Handler called when selection changes.',
+ },
+ virtualized: {
+ type: 'boolean',
+ default: false,
+ description: 'Enable virtualization for large lists.',
+ },
+ maxWidth: {
+ type: 'string',
+ description: 'Maximum width of the list box popover.',
+ },
+ maxHeight: {
+ type: 'string',
+ description: 'Maximum height of the list box popover.',
+ },
+ ...classNamePropDefs,
+};
+
+export const menuItemPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ required: true,
+ description: 'Content displayed in the menu item.',
+ },
+ id: {
+ type: 'enum',
+ values: ['Key'],
+ description: 'Unique key for the item.',
+ },
+ iconStart: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Icon displayed before the item content.',
+ },
+ color: {
+ type: 'enum',
+ values: ['primary', 'danger'],
+ description: (
+ <>
+ Color variant. Use danger for destructive actions.
+
+ ),
+ },
+ href: {
+ type: 'string',
+ description: 'URL to navigate to when the item is clicked.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ description: 'Whether the item is disabled.',
+ },
+ textValue: {
+ type: 'string',
+ description: 'Text used for typeahead and accessibility.',
+ },
+ onAction: {
+ type: 'enum',
+ values: ['() => void'],
+ description: 'Handler called when the item is activated.',
+ },
+ ...classNamePropDefs,
+};
+
+export const menuListBoxItemPropDefs: Record = {
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ required: true,
+ description: 'Content displayed in the list box item.',
+ },
+ id: {
+ type: 'enum',
+ values: ['Key'],
+ description: 'Unique key for the item.',
+ },
+ textValue: {
+ type: 'string',
+ description: 'Text used for typeahead and accessibility.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ description: 'Whether the item is disabled.',
+ },
+ ...classNamePropDefs,
+};
+
+export const menuSectionPropDefs: Record = {
+ title: {
+ type: 'string',
+ required: true,
+ description: 'Heading displayed above the section.',
+ },
+ children: {
+ type: 'enum',
+ values: ['ReactNode'],
+ required: true,
+ description: 'Menu items within the section.',
+ },
+ ...classNamePropDefs,
+};
+
+export const menuSeparatorPropDefs: Record = {
+ ...classNamePropDefs,
+};
diff --git a/docs-ui/src/app/components/menu/snippets.ts b/docs-ui/src/app/components/menu/snippets.ts
new file mode 100644
index 0000000000..ee7e77e8c2
--- /dev/null
+++ b/docs-ui/src/app/components/menu/snippets.ts
@@ -0,0 +1,119 @@
+export const usage = `import { MenuTrigger, Menu, MenuItem } from '@backstage/ui';
+
+
+
+
+`;
+
+export const preview = `
+
+
+`;
+
+export const submenu = `
+
+
+`;
+
+export const icons = `
+
+
+`;
+
+export const sections = `
+
+
+`;
+
+export const separators = `
+
+
+`;
+
+export const links = `
+
+
+`;
+
+export const autocomplete = `
+
+
+
+
+
+
+`;
+
+export const autocompleteListbox = `
+
+
+ Option 1
+ Option 2
+ Option 3
+
+`;
+
+export const autocompleteListboxMultiple = `
+
+
+ Option 1
+ Option 2
+ Option 3
+
+`;
diff --git a/docs-ui/src/app/components/page.mdx b/docs-ui/src/app/components/page.mdx
index bd18005d19..399d9aafbf 100644
--- a/docs-ui/src/app/components/page.mdx
+++ b/docs-ui/src/app/components/page.mdx
@@ -1,173 +1,9 @@
-import { ComponentCards, ComponentCard } from '@/components/ComponentCards';
-import { LayoutComponents } from '@/components/LayoutComponents';
-import { CodeBlock } from '@/components/CodeBlock';
+import { ComponentGrid } from '@/components/ComponentGrid';
# Components
-## Layout Components
+Below is the full list of components available in the library. Each component is designed to be flexible, accessible,
+and easy to integrate into your plugins. We are actively working on adding more components, so check back regularly
+for updates.
-We built a couple of layout components to help you build responsive elements
-that will be consistent with the rest of your Backstage instance. These
-components are opinionated and use TypeScript to ensure that the props you
-provide are the ones coming from the theme.
-
-
- Hello World
-
- Project 1
- Project 2
-
-
-`}
-/>
-
-
-
-## Components
-
-### Actions
-
-
-
-
-
-
-
-
-### Content display
-
-
-
-
-
-
-### Selection and inputs
-
-
-
-
-
-
-
-
-
-
-
-### Navigation
-
-
-
-
-
-
-
-
-### Images and icons
-
-
-
-
-
-
-### Feedback indicators
-
-
-
-
-
-
-### Typography
-
-
-
-
+
diff --git a/docs-ui/src/app/components/password-field/components.tsx b/docs-ui/src/app/components/password-field/components.tsx
new file mode 100644
index 0000000000..a9f96b9267
--- /dev/null
+++ b/docs-ui/src/app/components/password-field/components.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { PasswordField } from '../../../../../packages/ui/src/components/PasswordField/PasswordField';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { RiLockLine } from '@remixicon/react';
+
+export const WithLabel = () => {
+ return (
+
+ );
+};
+
+export const Sizes = () => {
+ return (
+
+
+
+
+ );
+};
+
+export const WithDescription = () => {
+ return (
+
+ );
+};
+
+export const WithIcon = () => {
+ return (
+ }
+ style={{ maxWidth: '300px' }}
+ />
+ );
+};
+
+export const Validation = () => {
+ return (
+
+ );
+};
diff --git a/docs-ui/src/app/components/password-field/page.mdx b/docs-ui/src/app/components/password-field/page.mdx
new file mode 100644
index 0000000000..2b79425453
--- /dev/null
+++ b/docs-ui/src/app/components/password-field/page.mdx
@@ -0,0 +1,87 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { passwordFieldPropDefs } from './props-definition';
+import {
+ passwordFieldUsageSnippet,
+ withLabelSnippet,
+ sizesSnippet,
+ withDescriptionSnippet,
+ withIconSnippet,
+ validationSnippet,
+} from './snippets';
+import {
+ WithLabel,
+ Sizes,
+ WithDescription,
+ WithIcon,
+ Validation,
+} from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { CodeBlock } from '@/components/CodeBlock';
+import { PasswordFieldDefinition } from '../../../utils/definitions';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+
+export const reactAriaUrls = {
+ textField: 'https://react-aria.adobe.com/TextField',
+};
+
+
+
+}
+ code={withLabelSnippet}
+/>
+
+## Usage
+
+
+
+## API reference
+
+
+
+
+
+## Examples
+
+### Sizes
+
+} code={sizesSnippet} />
+
+### With description
+
+}
+ code={withDescriptionSnippet}
+/>
+
+### With icon
+
+}
+ code={withIconSnippet}
+/>
+
+### Validation
+
+}
+ code={validationSnippet}
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/password-field/props-definition.tsx b/docs-ui/src/app/components/password-field/props-definition.tsx
new file mode 100644
index 0000000000..63f0f56d25
--- /dev/null
+++ b/docs-ui/src/app/components/password-field/props-definition.tsx
@@ -0,0 +1,77 @@
+import { classNamePropDefs, type PropDef } from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const passwordFieldPropDefs: Record = {
+ size: {
+ type: 'enum',
+ values: ['small', 'medium'],
+ default: 'small',
+ responsive: true,
+ description: (
+ <>
+ Visual size of the input. Use small for dense layouts,{' '}
+ medium for prominent fields.
+
+ ),
+ },
+ label: {
+ type: 'string',
+ description: 'Visible label displayed above the input.',
+ },
+ secondaryLabel: {
+ type: 'string',
+ description: (
+ <>
+ Secondary text shown next to the label. If not provided and isRequired
+ is true, displays Required.
+
+ ),
+ },
+ description: {
+ type: 'string',
+ description: 'Help text displayed below the label.',
+ },
+ icon: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Icon rendered before the input.',
+ },
+ placeholder: {
+ type: 'string',
+ description: 'Text displayed when the input is empty.',
+ },
+ name: {
+ type: 'string',
+ description: 'Form field name for submission.',
+ },
+ isRequired: {
+ type: 'boolean',
+ description: 'Whether the field is required for form submission.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ description: 'Whether the input is disabled.',
+ },
+ isReadOnly: {
+ type: 'boolean',
+ description: 'Whether the input is read-only.',
+ },
+ value: {
+ type: 'string',
+ description: 'Controlled value of the input.',
+ },
+ defaultValue: {
+ type: 'string',
+ description: 'Default value for uncontrolled usage.',
+ },
+ onChange: {
+ type: 'enum',
+ values: ['(value: string) => void'],
+ description: 'Handler called when the input value changes.',
+ },
+ isInvalid: {
+ type: 'boolean',
+ description: 'Whether the field is in an invalid state.',
+ },
+ ...classNamePropDefs,
+};
diff --git a/docs-ui/src/app/components/password-field/snippets.ts b/docs-ui/src/app/components/password-field/snippets.ts
new file mode 100644
index 0000000000..6bc4b9760b
--- /dev/null
+++ b/docs-ui/src/app/components/password-field/snippets.ts
@@ -0,0 +1,33 @@
+export const passwordFieldUsageSnippet = `import { PasswordField } from '@backstage/ui';
+
+`;
+
+export const withLabelSnippet = ``;
+
+export const sizesSnippet = `
+
+
+`;
+
+export const withDescriptionSnippet = ``;
+
+export const withIconSnippet = `}
+/>`;
+
+export const validationSnippet = ``;
diff --git a/docs-ui/src/app/components/plugin-header/components.tsx b/docs-ui/src/app/components/plugin-header/components.tsx
new file mode 100644
index 0000000000..b3d831e718
--- /dev/null
+++ b/docs-ui/src/app/components/plugin-header/components.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { PluginHeader } from '../../../../../packages/ui/src/components/PluginHeader/PluginHeader';
+import { HeaderPage } from '../../../../../packages/ui/src/components/HeaderPage/HeaderPage';
+import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
+import { Button } from '../../../../../packages/ui/src/components/Button/Button';
+import { MemoryRouter } from 'react-router-dom';
+import {
+ RiHeartLine,
+ RiEmotionHappyLine,
+ RiCloudy2Line,
+} from '@remixicon/react';
+
+const tabs = [
+ { id: 'overview', label: 'Overview', href: '/overview' },
+ { id: 'checks', label: 'Checks', href: '/checks' },
+ { id: 'tracks', label: 'Tracks', href: '/tracks' },
+ { id: 'campaigns', label: 'Campaigns', href: '/campaigns' },
+ { id: 'integrations', label: 'Integrations', href: '/integrations' },
+];
+
+const tabs2 = [
+ { id: 'banana', label: 'Banana', href: '/banana' },
+ { id: 'apple', label: 'Apple', href: '/apple' },
+ { id: 'orange', label: 'Orange', href: '/orange' },
+];
+
+export const WithAllOptionsAndTabs = () => (
+
+
+ } />
+ } />
+ } />
+
+ }
+ />
+
+);
+
+export const WithAllOptions = () => (
+
+
+ } />
+ } />
+ } />
+
+ }
+ />
+
+);
+
+export const WithHeaderPage = () => (
+
+ <>
+
+ Custom action}
+ />
+
+
+);
diff --git a/docs-ui/src/app/components/plugin-header/page.mdx b/docs-ui/src/app/components/plugin-header/page.mdx
new file mode 100644
index 0000000000..5f8e02bfc4
--- /dev/null
+++ b/docs-ui/src/app/components/plugin-header/page.mdx
@@ -0,0 +1,57 @@
+import { PropsTable } from '@/components/PropsTable';
+import { CodeBlock } from '@/components/CodeBlock';
+import { Snippet } from '@/components/Snippet';
+import {
+ WithAllOptionsAndTabs,
+ WithAllOptions,
+ WithHeaderPage,
+} from './components';
+import { headerPropDefs } from './props-definition';
+import {
+ usage,
+ simple,
+ defaultSnippet,
+ withTabs,
+ withHeaderPage,
+} from './snippets';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { PluginHeaderDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+
+
+## Examples
+
+### Simple plugin header
+
+} code={simple} open />
+
+### Plugin header with tabs
+
+Tabs use React Router and highlight automatically based on the current route.
+
+} code={withTabs} open />
+
+### Plugin header with HeaderPage
+
+Combine with [HeaderPage](/components/header-page) for multi-level navigation.
+
+} code={withHeaderPage} open />
+
+
+
+
diff --git a/docs-ui/src/app/components/plugin-header/props-definition.tsx b/docs-ui/src/app/components/plugin-header/props-definition.tsx
new file mode 100644
index 0000000000..4a651cdb72
--- /dev/null
+++ b/docs-ui/src/app/components/plugin-header/props-definition.tsx
@@ -0,0 +1,63 @@
+import { classNamePropDefs, type PropDef } from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const headerPropDefs: Record = {
+ icon: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Icon displayed before the title.',
+ },
+ title: {
+ type: 'string',
+ description: 'Main heading text for the header.',
+ },
+ titleLink: {
+ type: 'string',
+ description: 'URL the title links to when clicked.',
+ },
+ customActions: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Custom elements rendered in the toolbar area.',
+ },
+ tabs: {
+ type: 'complex',
+ description: 'Navigation tabs displayed below the toolbar.',
+ complexType: {
+ name: 'HeaderTab[]',
+ properties: {
+ id: {
+ type: 'string',
+ required: true,
+ description: 'Unique identifier for the tab.',
+ },
+ label: {
+ type: 'string',
+ required: true,
+ description: 'Display text for the tab.',
+ },
+ href: {
+ type: 'string',
+ required: true,
+ description: 'URL to navigate to when tab is clicked.',
+ },
+ matchStrategy: {
+ type: "'exact' | 'prefix'",
+ required: false,
+ description: (
+ <>
+ Route matching strategy. Use exact for exact path
+ match, prefix if pathname starts with href.
+
+ ),
+ },
+ },
+ },
+ },
+ onTabSelectionChange: {
+ type: 'enum',
+ values: ['(key: Key) => void'],
+ description: 'Handler called when the selected tab changes.',
+ },
+ ...classNamePropDefs,
+};
diff --git a/docs-ui/src/app/components/plugin-header/snippets.ts b/docs-ui/src/app/components/plugin-header/snippets.ts
new file mode 100644
index 0000000000..4e9518af73
--- /dev/null
+++ b/docs-ui/src/app/components/plugin-header/snippets.ts
@@ -0,0 +1,61 @@
+export const usage = `import { PluginHeader } from '@backstage/ui';
+
+`;
+
+export const defaultSnippet = `
+ } />
+ } />
+ } />
+
+ }
+/>`;
+
+export const simple = `
+ } />
+ } />
+ } />
+
+ }
+/>`;
+
+export const withTabs = ``;
+
+export const withHeaderPage = `
+Custom action}
+/>`;
diff --git a/docs-ui/src/app/components/popover/components.tsx b/docs-ui/src/app/components/popover/components.tsx
new file mode 100644
index 0000000000..4135d88059
--- /dev/null
+++ b/docs-ui/src/app/components/popover/components.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { Popover } from '../../../../../packages/ui/src/components/Popover/Popover';
+import { DialogTrigger } from '../../../../../packages/ui/src/components/Dialog/Dialog';
+import { Button } from '../../../../../packages/ui/src/components/Button/Button';
+import { Text } from '../../../../../packages/ui/src/components/Text/Text';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+
+export const Default = () => {
+ return (
+
+
+
+ Popover content
+
+
+ );
+};
+
+export const Placement = () => {
+ return (
+
+
+
+
+ Content above trigger
+
+
+
+
+
+ Content to the right
+
+
+
+
+
+ Content below trigger
+
+
+
+
+
+ Content to the left
+
+
+
+ );
+};
+
+export const HideArrow = () => {
+ return (
+
+
+
+ Popover without arrow
+
+
+ );
+};
diff --git a/docs-ui/src/app/components/popover/page.mdx b/docs-ui/src/app/components/popover/page.mdx
new file mode 100644
index 0000000000..0d546cdc05
--- /dev/null
+++ b/docs-ui/src/app/components/popover/page.mdx
@@ -0,0 +1,74 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+import { dialogTriggerPropDefs, popoverPropDefs } from './props-definition';
+import {
+ popoverUsageSnippet,
+ defaultSnippet,
+ placementSnippet,
+ hideArrowSnippet,
+} from './snippets';
+import { Default, Placement, HideArrow } from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { PopoverDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+export const reactAriaUrls = {
+ dialogTrigger: 'https://react-aria.adobe.com/Modal#dialogtrigger',
+ popover: 'https://react-aria.adobe.com/Popover',
+};
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+### DialogTrigger
+
+Wraps the trigger button and popover content.
+
+
+
+
+
+### Popover
+
+Displays floating content with automatic positioning.
+
+
+
+
+
+## Examples
+
+### Placement
+
+}
+ code={placementSnippet}
+/>
+
+### Hidden arrow
+
+}
+ code={hideArrowSnippet}
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/popover/props-definition.ts b/docs-ui/src/app/components/popover/props-definition.ts
new file mode 100644
index 0000000000..563bfa7d66
--- /dev/null
+++ b/docs-ui/src/app/components/popover/props-definition.ts
@@ -0,0 +1,47 @@
+import { childrenPropDefs, classNamePropDefs } from '@/utils/propDefs';
+import type { PropDef } from '@/utils/propDefs';
+
+export const dialogTriggerPropDefs: Record = {
+ defaultOpen: {
+ type: 'boolean',
+ description: 'Whether the popover is open by default (uncontrolled).',
+ },
+ isOpen: {
+ type: 'boolean',
+ description: 'Whether the popover is open (controlled).',
+ },
+ onOpenChange: {
+ type: 'enum',
+ values: ['(isOpen: boolean) => void'],
+ description: 'Handler called when the popover open state changes.',
+ },
+ ...childrenPropDefs,
+};
+
+export const popoverPropDefs: Record = {
+ placement: {
+ type: 'enum',
+ values: ['top', 'right', 'bottom', 'left'],
+ description:
+ 'The placement of the popover relative to the trigger element.',
+ },
+ offset: {
+ type: 'number',
+ default: '8',
+ description:
+ 'The distance in pixels between the popover and the trigger element.',
+ },
+ containerPadding: {
+ type: 'number',
+ default: '12',
+ description:
+ 'The minimum distance in pixels from the edge of the viewport.',
+ },
+ hideArrow: {
+ type: 'boolean',
+ default: 'false',
+ description: 'Whether to hide the arrow pointing to the trigger element.',
+ },
+ ...childrenPropDefs,
+ ...classNamePropDefs,
+};
diff --git a/docs-ui/src/app/components/popover/snippets.ts b/docs-ui/src/app/components/popover/snippets.ts
new file mode 100644
index 0000000000..986b33c770
--- /dev/null
+++ b/docs-ui/src/app/components/popover/snippets.ts
@@ -0,0 +1,49 @@
+export const popoverUsageSnippet = `import { DialogTrigger, Popover, Button, Text } from '@backstage/ui';
+
+
+
+
+ Popover content
+
+`;
+
+export const defaultSnippet = `
+
+
+ Popover content
+
+`;
+
+export const placementSnippet = `
+
+
+
+ Content above trigger
+
+
+
+
+
+ Content to the right
+
+
+
+
+
+ Content below trigger
+
+
+
+
+
+ Content to the left
+
+
+`;
+
+export const hideArrowSnippet = `
+
+
+ Popover without arrow
+
+`;
diff --git a/docs-ui/src/app/components/radio-group/components.tsx b/docs-ui/src/app/components/radio-group/components.tsx
new file mode 100644
index 0000000000..56870c0166
--- /dev/null
+++ b/docs-ui/src/app/components/radio-group/components.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import {
+ RadioGroup,
+ Radio,
+} from '../../../../../packages/ui/src/components/RadioGroup/RadioGroup';
+
+export const Default = () => {
+ return (
+
+ Bulbasaur
+ Charmander
+ Squirtle
+
+ );
+};
+
+export const Horizontal = () => {
+ return (
+
+ Bulbasaur
+ Charmander
+ Squirtle
+
+ );
+};
+
+export const Disabled = () => {
+ return (
+
+ Bulbasaur
+ Charmander
+ Squirtle
+
+ );
+};
+
+export const DisabledSingle = () => {
+ return (
+
+ Bulbasaur
+
+ Charmander
+
+ Squirtle
+
+ );
+};
+
+export const Validation = () => {
+ return (
+ (value === 'charmander' ? 'Nice try!' : null)}
+ >
+ Bulbasaur
+ Charmander
+ Squirtle
+
+ );
+};
+
+export const ReadOnly = () => {
+ return (
+
+ Bulbasaur
+ Charmander
+ Squirtle
+
+ );
+};
diff --git a/docs-ui/src/app/components/radio-group/page.mdx b/docs-ui/src/app/components/radio-group/page.mdx
new file mode 100644
index 0000000000..5cc296b959
--- /dev/null
+++ b/docs-ui/src/app/components/radio-group/page.mdx
@@ -0,0 +1,118 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+import { radioGroupPropDefs, radioPropDefs } from './props-definition';
+import {
+ radioGroupUsageSnippet,
+ defaultSnippet,
+ horizontalSnippet,
+ disabledSnippet,
+ disabledSingleSnippet,
+ validationSnippet,
+ readOnlySnippet,
+} from './snippets';
+import {
+ Default,
+ Horizontal,
+ Disabled,
+ DisabledSingle,
+ Validation,
+ ReadOnly,
+} from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { CodeBlock } from '@/components/CodeBlock';
+import { RadioGroupDefinition } from '../../../utils/definitions';
+
+export const reactAriaUrls = {
+ radioGroup: 'https://react-aria.adobe.com/RadioGroup',
+};
+
+
+
+} code={defaultSnippet} />
+
+## Usage
+
+
+
+## API reference
+
+### RadioGroup
+
+
+
+
+
+### Radio
+
+Individual radio button within a group.
+
+
+
+
+
+## Examples
+
+### Horizontal
+
+}
+ code={horizontalSnippet}
+/>
+
+### Disabled
+
+}
+ code={disabledSnippet}
+/>
+
+### Disabled single radio
+
+}
+ code={disabledSingleSnippet}
+/>
+
+### Validation
+
+}
+ code={validationSnippet}
+/>
+
+### Read only
+
+}
+ code={readOnlySnippet}
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/radio-group/props-definition.tsx b/docs-ui/src/app/components/radio-group/props-definition.tsx
new file mode 100644
index 0000000000..54da42d93a
--- /dev/null
+++ b/docs-ui/src/app/components/radio-group/props-definition.tsx
@@ -0,0 +1,91 @@
+import {
+ classNamePropDefs,
+ childrenPropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const radioGroupPropDefs: Record = {
+ label: {
+ type: 'string',
+ description: 'The visible label for the radio group.',
+ },
+ 'aria-label': {
+ type: 'string',
+ description:
+ 'Accessible label when a visible label is not provided. Either label, aria-label, or aria-labelledby is required.',
+ },
+ 'aria-labelledby': {
+ type: 'string',
+ description:
+ 'ID of an element that labels the radio group. Either label, aria-label, or aria-labelledby is required.',
+ },
+ secondaryLabel: {
+ type: 'string',
+ description: (
+ <>
+ Secondary label text. Defaults to Required when isRequired
+ is true.
+
+ ),
+ },
+ description: {
+ type: 'string',
+ description: 'Helper text displayed below the label.',
+ },
+ orientation: {
+ type: 'enum',
+ values: ['horizontal', 'vertical'],
+ default: 'vertical',
+ description: 'The axis the radio buttons should align with.',
+ },
+ value: {
+ type: 'string',
+ description: 'The current value (controlled).',
+ },
+ defaultValue: {
+ type: 'string',
+ description: 'The default value (uncontrolled).',
+ },
+ onChange: {
+ type: 'enum',
+ values: ['(value: string) => void'],
+ description: 'Handler called when the value changes.',
+ },
+ name: {
+ type: 'string',
+ description: 'The name of the radio group for form submission.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ description: 'Whether all radio buttons in the group are disabled.',
+ },
+ isReadOnly: {
+ type: 'boolean',
+ description: 'Whether the radio group is read-only.',
+ },
+ isRequired: {
+ type: 'boolean',
+ description: 'Whether a selection is required before form submission.',
+ },
+ isInvalid: {
+ type: 'boolean',
+ description: 'Whether the radio group is in an invalid state.',
+ },
+ ...childrenPropDefs,
+ ...classNamePropDefs,
+};
+
+export const radioPropDefs: Record = {
+ value: {
+ type: 'string',
+ required: true,
+ description: 'The value of the radio button.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ description: 'Whether this radio button is disabled.',
+ },
+ ...childrenPropDefs,
+ ...classNamePropDefs,
+};
diff --git a/docs-ui/src/app/components/radio-group/snippets.ts b/docs-ui/src/app/components/radio-group/snippets.ts
new file mode 100644
index 0000000000..d0b14ef5c4
--- /dev/null
+++ b/docs-ui/src/app/components/radio-group/snippets.ts
@@ -0,0 +1,57 @@
+export const radioGroupUsageSnippet = `import { RadioGroup, Radio } from '@backstage/ui';
+
+
+ Option 1
+ Option 2
+`;
+
+export const defaultSnippet = `
+ Bulbasaur
+ Charmander
+ Squirtle
+`;
+
+export const horizontalSnippet = `
+ Bulbasaur
+ Charmander
+ Squirtle
+`;
+
+export const disabledSnippet = `
+ Bulbasaur
+ Charmander
+ Squirtle
+`;
+
+export const disabledSingleSnippet = `
+ Bulbasaur
+
+ Charmander
+
+ Squirtle
+`;
+
+export const validationSnippet = ` (value === 'charmander' ? 'Nice try!' : null)}
+>
+ Bulbasaur
+ Charmander
+ Squirtle
+`;
+
+export const readOnlySnippet = `
+ Bulbasaur
+ Charmander
+ Squirtle
+`;
diff --git a/docs-ui/src/app/components/search-field/components.tsx b/docs-ui/src/app/components/search-field/components.tsx
new file mode 100644
index 0000000000..84a4c6018d
--- /dev/null
+++ b/docs-ui/src/app/components/search-field/components.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { SearchField } from '../../../../../packages/ui/src/components/SearchField/SearchField';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+
+export const WithLabel = () => {
+ return (
+
+ );
+};
+
+export const Sizes = () => {
+ return (
+
+
+
+
+ );
+};
+
+export const WithDescription = () => {
+ return (
+
+ );
+};
+
+export const StartCollapsed = () => {
+ return (
+
+
+
+
+ );
+};
diff --git a/docs-ui/src/app/components/search-field/page.mdx b/docs-ui/src/app/components/search-field/page.mdx
new file mode 100644
index 0000000000..425dbc8f62
--- /dev/null
+++ b/docs-ui/src/app/components/search-field/page.mdx
@@ -0,0 +1,91 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+import { searchFieldPropDefs } from './props-definition';
+import {
+ searchFieldUsageSnippet,
+ withLabelSnippet,
+ sizesSnippet,
+ withDescriptionSnippet,
+ startCollapsedSnippet,
+} from './snippets';
+import {
+ WithLabel,
+ Sizes,
+ WithDescription,
+ StartCollapsed,
+} from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { CodeBlock } from '@/components/CodeBlock';
+import { SearchFieldDefinition } from '../../../utils/definitions';
+
+export const reactAriaUrls = {
+ searchField: 'https://react-aria.adobe.com/SearchField',
+};
+
+
+
+}
+ code={withLabelSnippet}
+/>
+
+## Usage
+
+
+
+## API reference
+
+
+
+
+
+## Examples
+
+### Sizes
+
+}
+ code={sizesSnippet}
+ layout="side-by-side"
+/>
+
+### With description
+
+Add context below the input with the `description` prop.
+
+}
+ code={withDescriptionSnippet}
+ layout="side-by-side"
+/>
+
+### Collapsible
+
+Use `startCollapsed` for space-constrained layouts where the field expands on focus.
+
+}
+ code={startCollapsedSnippet}
+ layout="side-by-side"
+/>
+
+
+
+
diff --git a/docs-ui/src/app/components/search-field/props-definition.tsx b/docs-ui/src/app/components/search-field/props-definition.tsx
new file mode 100644
index 0000000000..58d2cb0988
--- /dev/null
+++ b/docs-ui/src/app/components/search-field/props-definition.tsx
@@ -0,0 +1,85 @@
+import { classNamePropDefs, type PropDef } from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const searchFieldPropDefs: Record = {
+ size: {
+ type: 'enum',
+ values: ['small', 'medium'],
+ default: 'small',
+ responsive: true,
+ description: (
+ <>
+ Visual size of the input. Use small for inline or dense
+ layouts, medium for standalone fields.
+
+ ),
+ },
+ label: {
+ type: 'string',
+ description: 'The visible label for the search field.',
+ },
+ secondaryLabel: {
+ type: 'string',
+ description: (
+ <>
+ Secondary label text. Defaults to Required when isRequired
+ is true.
+
+ ),
+ },
+ description: {
+ type: 'string',
+ description: 'Helper text displayed below the label.',
+ },
+ placeholder: {
+ type: 'string',
+ default: 'Search',
+ description: 'Placeholder text shown when the field is empty.',
+ },
+ icon: {
+ type: 'enum',
+ values: ['ReactNode', 'false'],
+ description:
+ 'Icon displayed before the input. Set to false to hide the icon.',
+ },
+ startCollapsed: {
+ type: 'boolean',
+ default: 'false',
+ description:
+ 'Whether the search field starts in a collapsed state. Expands on focus.',
+ },
+ name: {
+ type: 'string',
+ description: 'The name of the input for form submission.',
+ },
+ value: {
+ type: 'string',
+ description: 'The current value (controlled).',
+ },
+ defaultValue: {
+ type: 'string',
+ description: 'The default value (uncontrolled).',
+ },
+ onChange: {
+ type: 'enum',
+ values: ['(value: string) => void'],
+ description: 'Handler called when the value changes.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ description: 'Whether the search field is disabled.',
+ },
+ isReadOnly: {
+ type: 'boolean',
+ description: 'Whether the search field is read-only.',
+ },
+ isRequired: {
+ type: 'boolean',
+ description: 'Whether a value is required before form submission.',
+ },
+ isInvalid: {
+ type: 'boolean',
+ description: 'Whether the search field is in an invalid state.',
+ },
+ ...classNamePropDefs,
+};
diff --git a/docs-ui/src/app/components/search-field/snippets.ts b/docs-ui/src/app/components/search-field/snippets.ts
new file mode 100644
index 0000000000..e54bca1bf4
--- /dev/null
+++ b/docs-ui/src/app/components/search-field/snippets.ts
@@ -0,0 +1,20 @@
+export const searchFieldUsageSnippet = `import { SearchField } from '@backstage/ui';
+
+`;
+
+export const withLabelSnippet = ``;
+
+export const sizesSnippet = `
+
+
+`;
+
+export const withDescriptionSnippet = ``;
+
+export const startCollapsedSnippet = `
+
+
+`;
diff --git a/docs-ui/src/app/components/select/components.tsx b/docs-ui/src/app/components/select/components.tsx
new file mode 100644
index 0000000000..1cbc323b84
--- /dev/null
+++ b/docs-ui/src/app/components/select/components.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { Select } from '../../../../../packages/ui/src/components/Select/Select';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { RiCloudLine } from '@remixicon/react';
+
+const fontOptions = [
+ { value: 'sans', label: 'Sans-serif' },
+ { value: 'serif', label: 'Serif' },
+ { value: 'mono', label: 'Monospace' },
+ { value: 'cursive', label: 'Cursive' },
+];
+
+const countries = [
+ { value: 'us', label: 'United States' },
+ { value: 'ca', label: 'Canada' },
+ { value: 'mx', label: 'Mexico' },
+ { value: 'uk', label: 'United Kingdom' },
+ { value: 'fr', label: 'France' },
+ { value: 'de', label: 'Germany' },
+ { value: 'it', label: 'Italy' },
+ { value: 'es', label: 'Spain' },
+ { value: 'jp', label: 'Japan' },
+ { value: 'cn', label: 'China' },
+ { value: 'in', label: 'India' },
+ { value: 'br', label: 'Brazil' },
+ { value: 'au', label: 'Australia' },
+];
+
+const skills = [
+ { value: 'react', label: 'React' },
+ { value: 'typescript', label: 'TypeScript' },
+ { value: 'javascript', label: 'JavaScript' },
+ { value: 'python', label: 'Python' },
+ { value: 'java', label: 'Java' },
+ { value: 'csharp', label: 'C#' },
+ { value: 'go', label: 'Go' },
+ { value: 'rust', label: 'Rust' },
+ { value: 'kotlin', label: 'Kotlin' },
+ { value: 'swift', label: 'Swift' },
+];
+
+export const Preview = () => (
+
+);
+
+export const WithLabelAndDescription = () => (
+
+);
+
+export const Sizes = () => (
+
+
+
+
+);
+
+export const WithIcon = () => (
+ }
+ style={{ width: 300 }}
+ />
+);
+
+export const Disabled = () => (
+
+);
+
+export const DisabledOption = () => (
+
+);
+
+export const Searchable = () => (
+
+);
+
+export const MultipleSelection = () => (
+
+);
+
+export const SearchableMultiple = () => (
+
+);
diff --git a/docs-ui/src/app/components/select/page.mdx b/docs-ui/src/app/components/select/page.mdx
new file mode 100644
index 0000000000..8e7df65ef9
--- /dev/null
+++ b/docs-ui/src/app/components/select/page.mdx
@@ -0,0 +1,147 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+import {
+ Preview,
+ WithLabelAndDescription,
+ Sizes,
+ WithIcon,
+ Disabled,
+ DisabledOption,
+ Searchable,
+ MultipleSelection,
+ SearchableMultiple,
+} from './components';
+import { selectPropDefs } from './props-definition';
+import {
+ selectUsageSnippet,
+ selectDefaultSnippet,
+ selectDescriptionSnippet,
+ selectSizesSnippet,
+ selectDisabledSnippet,
+ selectResponsiveSnippet,
+ selectIconSnippet,
+ selectSearchableSnippet,
+ selectMultipleSnippet,
+ selectSearchableMultipleSnippet,
+ selectDisabledOptionsSnippet,
+} from './snippets';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { SelectDefinition } from '../../../utils/definitions';
+
+export const reactAriaUrls = {
+ select: 'https://react-aria.adobe.com/Select',
+};
+
+
+
+}
+ code={selectDefaultSnippet}
+/>
+
+## Usage
+
+
+
+## API reference
+
+
+
+
+
+## Examples
+
+### Label and description
+
+}
+ code={selectDescriptionSnippet}
+/>
+
+### Sizes
+
+}
+ code={selectSizesSnippet}
+/>
+
+### With icon
+
+}
+ code={selectIconSnippet}
+/>
+
+### Disabled
+
+}
+ code={selectDisabledSnippet}
+/>
+
+### Disabled options
+
+}
+ code={selectDisabledOptionsSnippet}
+/>
+
+### Searchable
+
+Enable filtering with the `searchable` prop.
+
+}
+ code={selectSearchableSnippet}
+/>
+
+### Multiple selection
+
+}
+ code={selectMultipleSnippet}
+/>
+
+### Searchable multiple
+
+Combine search and multiple selection.
+
+}
+ code={selectSearchableMultipleSnippet}
+/>
+
+### Responsive
+
+Size can change at different breakpoints.
+
+
+
+
+
+
diff --git a/docs-ui/src/app/components/select/props-definition.tsx b/docs-ui/src/app/components/select/props-definition.tsx
new file mode 100644
index 0000000000..0d1ab22202
--- /dev/null
+++ b/docs-ui/src/app/components/select/props-definition.tsx
@@ -0,0 +1,137 @@
+import {
+ classNamePropDefs,
+ stylePropDefs,
+ type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const selectPropDefs: Record = {
+ options: {
+ type: 'complex',
+ description: 'Array of options to display in the dropdown.',
+ complexType: {
+ name: 'SelectOption[]',
+ properties: {
+ value: {
+ type: 'string',
+ required: true,
+ description: 'Unique value for the option.',
+ },
+ label: {
+ type: 'string',
+ required: true,
+ description: 'Display text for the option.',
+ },
+ disabled: {
+ type: 'boolean',
+ required: false,
+ description: 'Whether the option is disabled.',
+ },
+ },
+ },
+ },
+ selectionMode: {
+ type: 'enum',
+ values: ['single', 'multiple'],
+ default: 'single',
+ description: 'Single or multiple selection mode.',
+ },
+ value: {
+ type: 'enum',
+ values: ['string', 'string[]'],
+ description:
+ 'Controlled selected value. String for single, array for multiple.',
+ },
+ defaultValue: {
+ type: 'enum',
+ values: ['string', 'string[]'],
+ description:
+ 'Initial value for uncontrolled usage. String for single, array for multiple.',
+ },
+ onSelectionChange: {
+ type: 'enum',
+ values: ['(key: Key | null) => void', '(keys: Selection) => void'],
+ description: 'Called when selection changes.',
+ },
+ label: {
+ type: 'string',
+ description: 'Visible label above the select.',
+ },
+ secondaryLabel: {
+ type: 'string',
+ description: (
+ <>
+ Secondary text shown next to the label. If not provided and isRequired
+ is true, displays Required.
+
+ ),
+ },
+ description: {
+ type: 'string',
+ description: 'Helper text displayed below the label.',
+ },
+ placeholder: {
+ type: 'string',
+ default: 'Select an option',
+ description: 'Text shown when no option is selected.',
+ },
+ size: {
+ type: 'enum',
+ values: ['small', 'medium'],
+ default: 'small',
+ responsive: true,
+ description: 'Visual size of the select field.',
+ },
+ icon: {
+ type: 'enum',
+ values: ['ReactNode'],
+ description: 'Icon displayed before the selected value.',
+ },
+ searchable: {
+ type: 'boolean',
+ default: false,
+ description: 'Enables search/filter functionality in the dropdown.',
+ },
+ searchPlaceholder: {
+ type: 'string',
+ default: 'Search...',
+ description:
+ 'Placeholder text for the search input when searchable is true.',
+ },
+ isOpen: {
+ type: 'boolean',
+ description: 'Controlled open state. Use with onOpenChange.',
+ },
+ defaultOpen: {
+ type: 'boolean',
+ description: 'Initial open state for uncontrolled usage.',
+ },
+ onOpenChange: {
+ type: 'enum',
+ values: ['(isOpen: boolean) => void'],
+ description: 'Called when the dropdown opens or closes.',
+ },
+ isDisabled: {
+ type: 'boolean',
+ description: 'Prevents user interaction when true.',
+ },
+ disabledKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ description: 'Keys of options that should be disabled.',
+ },
+ isRequired: {
+ type: 'boolean',
+ description: 'Marks the field as required for form validation.',
+ },
+ isInvalid: {
+ type: 'boolean',
+ description: 'Displays the select in an error state.',
+ },
+ name: {
+ type: 'string',
+ description: 'Form field name for form submission.',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
diff --git a/docs-ui/src/content/select.props.ts b/docs-ui/src/app/components/select/snippets.ts
similarity index 51%
rename from docs-ui/src/content/select.props.ts
rename to docs-ui/src/app/components/select/snippets.ts
index 05f0d895c9..ca16481eaa 100644
--- a/docs-ui/src/content/select.props.ts
+++ b/docs-ui/src/app/components/select/snippets.ts
@@ -1,115 +1,3 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- type PropDef,
-} from '@/utils/propDefs';
-
-export const selectPropDefs: Record = {
- label: {
- type: 'string',
- responsive: false,
- },
- description: {
- type: 'string',
- responsive: false,
- },
- name: {
- type: 'string',
- responsive: false,
- required: true,
- },
- options: {
- type: 'enum',
- values: ['Array<{ value: string, label: string }>'],
- required: true,
- },
- selectionMode: {
- type: 'enum',
- values: ['single', 'multiple'],
- default: 'single',
- responsive: false,
- },
- placeholder: {
- type: 'string',
- default: 'Select an item',
- responsive: false,
- },
- icon: {
- type: 'enum',
- values: ['ReactNode'],
- responsive: false,
- },
- value: {
- type: 'enum',
- values: ['string', 'string[]'],
- responsive: false,
- description:
- 'Selected value (controlled). String for single selection, array for multiple.',
- },
- defaultValue: {
- type: 'enum',
- values: ['string', 'string[]'],
- responsive: false,
- description:
- 'Initial value (uncontrolled). String for single selection, array for multiple.',
- },
- size: {
- type: 'enum',
- values: ['small', 'medium'],
- default: 'small',
- responsive: true,
- },
- isOpen: {
- type: 'boolean',
- responsive: false,
- },
- defaultOpen: {
- type: 'boolean',
- responsive: false,
- },
- disabledKeys: {
- type: 'enum',
- values: ['Iterable'],
- responsive: false,
- },
- isDisabled: {
- type: 'boolean',
- responsive: false,
- },
- isRequired: {
- type: 'boolean',
- responsive: false,
- },
- isInvalid: {
- type: 'boolean',
- responsive: false,
- },
- onOpenChange: {
- type: 'enum',
- values: ['(isOpen: boolean) => void'],
- responsive: false,
- },
- onSelectionChange: {
- type: 'enum',
- values: ['(key: Key | null) => void', '(keys: Selection) => void'],
- responsive: false,
- description:
- 'Handler called when selection changes. Single mode: receives Key | null. Multiple mode: receives Selection.',
- },
- searchable: {
- type: 'boolean',
- default: 'false',
- responsive: false,
- },
- searchPlaceholder: {
- type: 'string',
- default: 'Search...',
- responsive: false,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
export const selectUsageSnippet = `import { Select } from '@backstage/ui';