paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 15 Packages Projects Releases Wiki Activity

Fix home

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-07-23 08:37:28 +01:00
parent b829a7427b
commit 370a9dfae1
8 changed files with 255 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/public/css-classname-structure.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 42 KiB

docs-ui/src/app/install/page.mdx
+36
View File
@@ -0,0 +1,36 @@
import { CodeBlock } from '@/components/CodeBlock';
# How to install Backstage UI
## 1. Import the package
Import the package using a package manager.
<CodeBlock lang="shell" code={`yarn add @backstage/ui`} />
## 2. Import the css files
Import the global CSS file at the root of your application.
```tsx
import '@backstage/ui/css/styles.css';
```
## 3. Start building ✨
Now you can start building your plugin using the new design system.
```tsx
import { Flex, Button, Text } from '@backstage/ui';
<Flex>
<Text>Hello World</Text>
<Button>Click me</Button>
</Flex>;
```
## Next steps
Now that you have the basics down, you can start building your plugin using the new design system.
Please familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system.
If you have any questions, please reach out to us on [Discord](https://discord.gg/MUpMjP2).
docs-ui/src/app/page.mdx
+153 -23
View File
@@ -1,43 +1,173 @@
import { CodeBlock } from '@/components/CodeBlock';
import { ComponentCards, ComponentCard } from '@/components/ComponentCards';
# Backstage UI
## Welcome to Backstage UI, the new design library for Backstage plugins.
Welcome to the Backstage UI, the new design library for Backstage plugins. This
project is still under active development but we will make sure to document
This project is still under active development but we will make sure to document
the API as we go. We are aiming to improve the general UI of Backstage and
plugins across Backstage. This new library will take time to build but we are
building it incrementally with not conflict with the existing theming system.
## Installation
### Actions
### 1. Install Backstage UI
<ComponentCards>
<ComponentCard
title="Button"
description="A button component to help you trigger actions."
href="/components/button"
/>
<ComponentCard
title="ButtonLink"
description="A button component to help you trigger actions."
href="/components/button-link"
/>
<ComponentCard
title="ButtonIcon"
description="A button for actions with an icon."
href="/components/button-icon"
/>
<ComponentCard
title="Link"
description="A link component to help you navigate to other pages."
href="/components/link"
/>
</ComponentCards>
Install Backstage UI using a package manager.
### Layout
<CodeBlock lang="shell" code={`yarn add @backstage/ui`} />
<ComponentCards>
<ComponentCard
title="Box"
description="The simplest component to help you style your content."
href="/components/box"
/>
<ComponentCard
title="Flex"
description="A flex container for your layout."
href="/components/flex"
/>
<ComponentCard
title="Grid"
description="A grid container for your layout."
href="/components/grid"
/>
<ComponentCard
title="Container"
description="Helps you center your content."
href="/components/container"
/>
<ComponentCard
title="Card"
description="A component to separate your content on the page."
href="/components/card"
/>
<ComponentCard
title="Collapsible"
description="A collapsible component for expandable content."
href="/components/collapsible"
/>
</ComponentCards>
### 2. Import the css files
### Selection and inputs
Import the global CSS file at the root of your application.
<ComponentCards>
<ComponentCard
title="Checkbox"
description="A checkbox component to help you select items."
href="/components/checkbox"
/>
<ComponentCard
title="TextField"
description="A text field component to help you input text."
href="/components/text-field"
/>
<ComponentCard
title="SearchField"
description="A search field component to help you search for items."
href="/components/search-field"
/>
<ComponentCard
title="Select"
description="A select component to help you select items."
href="/components/select"
/>
<ComponentCard
title="Switch"
description="A switch component to help you toggle items."
href="/components/switch"
/>
<ComponentCard
title="RadioGroup"
description="A radio group component to help you select items."
href="/components/radio-group"
/>
</ComponentCards>
```tsx
import '@backstage/ui/css/styles.css';
```
### Navigation
### 3. Start building ✨
<ComponentCards>
<ComponentCard
title="Header"
description="A header component to help you display a header."
href="/components/header"
/>
<ComponentCard
title="HeaderPage"
description="A header to complement the Header component."
href="/components/header-page"
/>
<ComponentCard
title="Menu"
description="A menu component to help you display a menu."
href="/components/menu"
/>
<ComponentCard
title="Tabs"
description="A tabs component to help you display a tabs."
href="/components/tabs"
/>
</ComponentCards>
Now you can start building your plugin using the new design system.
### Images and icons
```tsx
import { Flex, Button, Text } from '@backstage/ui';
<ComponentCards>
<ComponentCard
title="Avatar"
description="A avatar component to help you display user avatars."
href="/components/avatar"
/>
<ComponentCard
title="Icon"
description="A icon component to help you display icons."
href="/components/icon"
/>
</ComponentCards>
<Flex>
<Text>Hello World</Text>
<Button>Click me</Button>
</Flex>;
```
### Feedback indicators
## Next steps
<ComponentCards>
<ComponentCard
title="Skeleton"
description="A skeleton component to help you display loading states."
href="/components/skeleton"
/>
<ComponentCard
title="Tooltip"
description="A tooltip component to help you display a tooltip."
href="/components/tooltip"
/>
</ComponentCards>
### Typography
<ComponentCards>
<ComponentCard
title="Text"
description="A text component to help you style your text."
href="/components/text"
/>
</ComponentCards>
## Support
Now that you have the basics down, you can start building your plugin using the new design system.
Please familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system.
docs-ui/src/components/ComponentCards/ComponentCards.module.css
+36
View File
@@ -0,0 +1,36 @@
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1rem;
margin-bottom: 3rem;
}
.card {
display: flex;
flex-direction: column;
justify-content: flex-end;
background-color: var(--panel);
border-radius: 8px;
border: 1px solid var(--border);
padding: 16px;
gap: 4px;
min-height: 120px;
&:hover {
background-color: var(--panel-hover);
}
}
.title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--primary);
}
.description {
margin: 0;
font-size: 14px;
color: var(--secondary);
}
docs-ui/src/components/ComponentCards/ComponentCards.tsx
+23
View File
@@ -0,0 +1,23 @@
import Link from 'next/link';
import styles from './ComponentCards.module.css';
export const ComponentCards = ({ children }: { children: React.ReactNode }) => {
return <div className={styles.grid}>{children}</div>;
};
export const ComponentCard = ({
title,
description,
href,
}: {
title: string;
description: string;
href: string;
}) => {
return (
<Link href={href} className={styles.card}>
<h3 className={styles.title}>{title}</h3>
<p className={styles.description}>{description}</p>
</Link>
);
};
docs-ui/src/components/ComponentCards/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './ComponentCards';
docs-ui/src/css/globals.css
+2
View File
@@ -1,6 +1,7 @@
:root {
--bg: #f4f4f4;
--panel: #fff;
--panel-hover: #fafafa;
--primary: #000;
--secondary: #929292;
--action: #fff;
@@ -20,6 +21,7 @@
[data-theme='dark'] {
--bg: #000;
--panel: #181818;
--panel-hover: #202020;
--primary: #fff;
--secondary: #818181;
--action: #202020;
docs-ui/src/utils/data.ts
+4
View File
@@ -9,6 +9,10 @@ export const overview: Page[] = [
title: 'Getting Started',
slug: '',
},
{
title: 'Installation',
slug: 'install',
},
{
title: 'About',
slug: 'about',