Scaleway UI

Open Source
Component Library

A woman and a man designing a digital user interface

Accessibility

We follow WAI-ARIA standards for each component.

Customizable

Easily define dark and light themes and customize them with various colors.

Developer XP

Scaleway UI is the main library in the Scaleway frontend environment. It is open source and continually maintained by our developers.

Getting Started

Run one of the following commands in your React project to start using Scaleway UI:

pnpm add @scaleway/ui @emotion/react @emotion/styled

yarn add @scaleway/ui @emotion/react @emotion/styled

npm i @scaleway/ui @emotion/react @emotion/styled

Integrate the theme into your project to use our components.

1import { theme, Button } from "@scaleway/ui"
2import { ThemeProvider } from "@emotion/react"
3
4const App = () => (
5    <ThemeProvider theme={theme}>
6        <Button variant="primary" onClick={() => console.log("clicked")}>
7          Click Me
8        </Button>
9    </ThemeProvider>
10)

Documentation

Advanced Use Cases

If you want to change the theme or even to create a dark theme, Scaleway UI allows you to do it easily

1import { ThemeProvider } from '@emotion/react'
2import { theme as lightTheme, dark as darkTheme, Button, Text } from '@scaleway/ui'
3import React, { useCallback, useState } from 'react'
4
5const App = () => {
6  const [isLightMode, setIsLightMode] = useState(true)
7
8  const setLightModeCallBack = useCallback(
9    isLight => {
10      setIsLightMode(isLight)
11    },
12    [setIsLightMode],
13  )
14
15  return (
16    <ThemeProvider theme={isLightMode ? lightTheme : darkTheme}>
17      <Text as="p" variant="body">
18        This could be a very cool introduction text.
19      </Text>
20      <Switch
21        name="darkMode"
22        size="small"
23        width={54}
24        checked={isLightMode}
25        onChange={(event) => {
26          setLightModeCallBack(event.target.checked)
27        }}
28        labeled
29        onLabel={<Icon size={20} name="sun" />}
30        offLabel={<Icon size={20} name="moon" />}
31      />
32    </ThemeProvider>
33  )
34}
35
36export default App
37