kickass-ui v0.0.2

Kickass UI

A React Tailwind Component Library

Installation

KICKASS-UI

Kickass-UI is available as an npm package.

npm:

npm install kickass-ui

yarn:

yarn add kickass-ui

Getting started with Kickass-UI Component

Here is an example of a basic app using Kickass-UI Component's Button component:

import * as React from 'react';
import { Button } from 'kickass-ui';
import 'kickass-ui/dist/index.css';

function App() {
  return (
    <Button variant="outlined" color="success" onClick={() => {}}>
      Hello World
    </Button>
  );
}

Using Custom themes

By default the component library uses the following color theme configuration

export const base = {
  contrast: {
    danger: '#fff',
    info: '#fff',
    onSurface: '#fff',
    primary: '#fff',
    secondary: '#fff',
    success: '#000',
    surface: '#000',
    warning: '#fff',
  },
  custom: {
    danger: '#fff',
    info: '#fff',
    onSurface: '#fff',
    primary: '#fff',
    secondary: '#fff',
    success: '#000',
    surface: '#000',
    warning: '#fff',
  },
  danger: '#ff4e4e',
  info: '#5F9DF7',
  onSurface: '#000',
  primary: '#4d89ff',
  secondary: '#999999',
  success: '#4dff4d',
  surface: '#fff',
  warning: '#ff965f',
};

However, you can define your custom theme by using the ThemeProvider context.

Here is an example of implementing custom theme using extendTheme method:

import * as React from 'react';
import { extendTheme, ThemeProvider, Typography } from 'kickass-ui';

const customTheme = extendTheme(base, {
  primary: 'pink',
  secondary: 'green',
  contrast: {
    ...base.contrast,
    primary: 'red',
  },
});

const App = () => {
  return (
    <ThemeProvider customTheme={customTheme}>
        <Typography color="primary" variant="h1">
          This is a sample theme
        </Typography>
    </ThemeProvider>
  )
}

Theme Props

Component list

You can refer to the following component list and prop definitions to use the library

Atoms

Molecules