Spartak UI

A collection of React components

Components

Forms

• Button
• Checkbox
• Select
• Text Input

Typography

• Code
• Heading
• Text

Display content

• Avatar
• Badge
• Card
• Separator

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.

Author

Sergei Cherniaev (@shdq)

Credits

• Logo icon designed by Sam Smith
• Font designed by Omnibus-Type

License

MIT License