Supreme-kit

HBO Max inspired react components library.

Requirements

• React 19.0.0

Installation

Install ui toolkit library. This is built on top of emotion.js but uses a default theme behind the scene. Which is based on Supreme Design System tokens and primitives.

npm install supreme-kit

Usage

Import and use components in a straightforward way

import { Button } from "supreme-kit";

function App() {
  return <Button>Click me</Button>;
}

Overriding theme

You can override the default theme by providing a custom theme object to the ThemeProvider from emotion.

import { ThemeProvider } from "@emotion/react";
import { Button } from "supreme-kit";

const customTheme = {
  components: {
    button: {
      "primary-default": "#002be7ff",
    },
  },
};

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Button>Click me</Button>
    </ThemeProvider>
  );
}

Styles reset

For resetting browser styles and achieving correctness, put anywhere in the application:

import { Reset } from "supreme-kit";

function App() {
  return <Reset />;
}

Font loading

For loading fonts, use the following snippet in the head tag of the index.html file:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
  rel="stylesheet"
/>

Links

Contribution guidelines

Releasing guidelines

See showcase

See documentation