Ultraviolet UI

Ultraviolet UI is a set of React components and utilities to build fast application.

Get Started

$ pnpm add @ultraviolet/ui @ultraviolet/themes

You will also need to import fonts in your project by adding:

<link href="https://fonts.cdnfonts.com/css/inter?styles=29139,29137,29140" rel="stylesheet" />
<link href="https://fonts.cdnfonts.com/css/jetbrains-mono-2?styles=156604" rel="stylesheet" />
<link href="https://fonts.cdnfonts.com/css/space-grotesk?styles=24816,24815,24817" rel="stylesheet" />

Or if you prefer to install the package for it you can add:

$ pnpm add @ultraviolet/fonts

and import it in your project:

import '@ultraviolet/fonts'

Usage

For the library to work properly, you need to wrap your application with the ThemeProvider component from @ultraviolet/themes. To have access to the theme object, simply import the object directly from the @ultraviolet/themes library:

import { theme } from '@ultraviolet/themes'

You will also need to import styles of components for them to have the correct styles.

import { ThemeProvider, theme } from '@ultraviolet/themes'
import { Button } from '@ultraviolet/ui'
import '@ultraviolet/ui/styles' // <- components style

const App = () => (
  <ThemeProvider theme={theme}>
    <Button onClick={() => console.log('clicked')}>Click Me</Button>
  </ThemeProvider>
)

Note: To generate your own theme easily you can check the theme generator.

Migration from V2 to V3

With the migration from @ultraviolet/ui 2.0.0 to @ultraviolet/ui 3.0.0, several core changes have been introduced. These changes are due to the shift in styling from Emotion to vanilla-extract.

Theme provider

To ensure the library works correctly, you must wrap your application with the ThemeProvider component. Import it from @ultraviolet/themes or @ultraviolet/ui (replacing the previous Emotion-based provider).

If your app still uses Emotion, you can combine both theme providers:

import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
import { consoleLightTheme, ThemeProvider as UVThemeProvider } from '@ultraviolet/themes'

const App = () => (
  <UVThemeProvider theme={consoleLightTheme}>
    <EmotionThemeProvider theme={consoleLightTheme}>{children}</EmotionThemeProvider>
  </UVThemeProvider>
)

Style

To ensure styles are applied, import the component styles at the root of your application:

import '@ultraviolet/ui/styles'

To replace normalize() (which was used with Emotion), you can now import a global style with the same effect:

Before:

import { Global } from '@emotion/react'
import { normalize } from '@ultraviolet/ui'
import { ThemeProvider } from '@emotion/react'

const App = () => (
  <ThemeProvider theme={theme}>
      <Global styles={css`${normalize()}`}>
      <MyApp />
  </ThemeProvider>
)

After:

import { ThemeProvider } from '@ultraviolet/themes'
import '@ultraviolet/themes/global'

const App = () => (
  <ThemeProvider theme={theme}>
    <MyApp />
  </ThemeProvider>
)

Documentation

Checkout our documentation website.

Contributing

📝 You can participate in the development and start contributing to it.