Ultraviolet UI

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

Get Started

$ pnpm add @ultraviolet/ui @ultraviolet/themes @emotion/react @emotion/styled

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"
/>

Usage

import { Global, ThemeProvider, css } from '@emotion/react'
import { Button, normalize, theme } from '@ultraviolet/ui'

const App = () => (
  <ThemeProvider theme={theme}>
    <Global
      styles={css`
        ${normalize()}
      `}
    />
    <Button onClick={() => console.log('clicked')}>Click Me</Button>
  </ThemeProvider>
)

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

Typescript

To allow typescript theme typings with @emotion/styled components, you'll have to define the @emotion/react module Theme interface in your project.

For example, in a emotion.d.ts file:

• Declaration to use the default Ultraviolet Themes

import '@emotion/react'
import type { UltravioletUITheme } from '@ultraviolet/ui'

declare module '@emotion/react' {
  export interface Theme extends UltravioletUITheme {}
}

• 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.

Contributing

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