Skip to content

shdq/spartak-ui

Repository files navigation

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

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.

Author

Sergei Cherniaev (@shdq)

Credits

License

MIT License