Scaleway UI
Scaleway UI is a set of React components and utilities to build fast application.
⚠️ This library is still WIP. We are actively working on it. Our goal is to have an easy-to-use UI system. This includes an exhaustive documentation, improved DX, confidence in testing and a lot of refactoring to have consistency across our components.
⚠️ We are going to break a lot of things towards V1. This library is not yet production ready.
Installation
$ pnpm add @scaleway/ui @emotion/react @emotion/styled
Usage
import { theme, normalize, Button } from '@scaleway/ui'
import { Global, css, ThemeProvider } from '@emotion/react'
const App = () => (
<ThemeProvider theme={theme}>
<Global styles={css`${normalize()}`}>
<Button variant="primary" onClick={() => console.log('clicked')}>
Click Me
</Button>
</ThemeProvider>
)
N.B. To allow typescript theme typings with @emotion/styled
components,
you'll have to define the @emotion/react
module Theme
interface in your project.
Example, in a emotion.d.ts
file:
- Declaration to use the default Scaleway theme
import '@emotion/react'
import type { SCWUITheme } from '@scaleway/ui'
declare module '@emotion/react' {
export interface Theme extends SCWUITheme {}
}
- Declaration to use your custom theme
import '@emotion/react'
import type { MyTheme } from './src/theme'
declare module '@emotion/react' {
export interface Theme extends MyTheme {}
}
Documentation
Checkout our documentation website.