We follow WAI-ARIA standards for each component.
Easily define dark and light themes and customize them with various colors.
Scaleway UI is the main library in the Scaleway frontend environment. It is open source and continually maintained by our developers.
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)
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
Discover our other open source projects:
Join us if you want to report an issue, if you have any questions or if you just want to meet new people!