Spartak-ui NPM

SpartakUI-horizontal

Spartak UI

A collection of React components

Components

Forms

Typography

Display content

Check out Storybook for visual look of the components.

Examples built with Spartak UI

Spotify Playlists with Button, Card, Heading and Text components
Twitter Card with Avatar, Button, Card, and typography components
YouTube Side Menu with Button component

Installation

npm

npm install spartak-ui

yarn

yarn add spartak-ui

Dark theme

There are ThemeProvider and useTheme hook to add dark theme to your app. Wrap your app component in ThemeProvider.

Usage

`ThemeProvider` wrapper

import { ThemeProvider } from "spartak-ui";

function Example() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

For switching themes let's add a component that utilizes useTheme hook.

`Switch` component

import { useTheme, Button } from "spartak-ui";
import { IconSun, IconMoon } from "@tabler/icons-react";

export const Switch = () => {
  const { theme, setTheme } = useTheme();
  const isThemeDark = theme === "dark";
  return (
    <Button
      onClick={
        () => setTheme(
        isThemeDark ?
        "light" :
        "dark")
      }
      icon={
        isThemeDark ?
        <IconSun /> :
        <IconMoon />
      }
      variant="text"
    />
  );
};

Import and add Switch component into your <App /> and that's it.