Skip to content

Update readme.md file more inline with installation.mdx #323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zoharma merged 1 commit into from
Oct 6, 2026
Merged

Update readme.md file more inline with installation.mdx #323

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Scientific React UI
===================

Scientific React UI components, based on MUI. A theme and component library to make websites at scientific institutions simple to create.
Scientific React UI components, based on MUI. SciReactUI is the React implementation of the Diamond Design System, a theme and component library to make websites at scientific institutions simple to create.
Our [StoryBook](https://diamondlightsource.github.io/sci-react-ui/) website has indepth information about the library and each component, but this Readme is a good place to start.

If you would like to contribute, please see our [Contributing](./contributing.md) document.
Expand Down Expand Up @@ -35,6 +35,15 @@ import "@diamondlightsource/sci-react-ui/font-styles.css";
- yarn add @mui/icons-material react-icons
```

For icons in your own application code (not required by sci-react-ui itself), we recommend [Lucide](https://lucide.dev/) - see the Icons foundation page in Storybook for guidance:

```sh
"One of:"
- pnpm add lucide-react
- npm i lucide-react
- yarn add lucide-react
```

### Usage

First use the ThemeProvider and wrap your App.
Expand All @@ -49,6 +58,10 @@ root.render(
);
```

Use the provided `DiamondDSTheme` with the ThemeProvider, or create your own. The theme controls colour via semantic surface tokens and consists of two parts:
- Theme configuration (`DiamondDSTheme.ts`)
- Semantic role tokens (`diamond-ds-roles.css`)

Navigation components support either static links (with href) or the use of a routing library (with linkComponent and to).
For NavLink and FooterLink, if both linkComponent and to are provided, it will use linkComponent. If not, it falls back to using href.

Expand Down Expand Up @@ -159,6 +172,8 @@ The centreSlot is absolutely positioned at 50% horizontally, which means it stay

Any children passed to the Footer will be placed in a horizontal Stack after the leftSlot.

See Storybook for guidance on adapting the Diamond DS theme to your own palette, using Material React Table with the theme, and avoiding dark mode flicker in SSR/client-side apps.

### Documentation

Documentation is created with Storybook. Additional information about auth, colours and theming can be found there.
Expand Down
Loading