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 | Use | |---|---| | extendTheme | Create a theme object extending another theme object ( base or dark or custom ) | | applyTheme | Manually apply theme | | <ThemeProvider/> | Theme context to automatically apply custom theme. Pass props customTheme | | themes (base or dark) | Themes defined in codebase | | ColorCodes | Enum with the colorcodes, refer ColorCodes |

Component list

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

Atoms

| Component | Props | |------------|-------| | Button | Button Props | | Avatar | Avatar Props | | Badge | Badge Props | | Checkbox | Checkbox Props | | Radio | Radio Props | | SelectMenu | SelectMenu Props | | TextArea | TextArea Props | | Toggle | Toggle Props | | Slider | Slider Props | TextField | TextField Props | | Typography | Typography Props |

Molecules

| Component | Variant | Props | |--------------------|-------------------------------|-------| | Accordion | |Accordion Props | | ActionPanel | |ActionPanel Props | | Alert | |Alert Props | | ButtonGroups | |ButtonGroups Props | | DescriptionList | |DescriptionList Props | | EmptyStates | Simple |EmptyStates Props | | | WithRecommendations | | | | WithRecommendationsGrid | | | | WithStartingPoints | | | | WithTemplates | | | Feeds | SimpleWithIcons |Feeds Props | | | StackedWithAvatars | | | GridList | ActionsWithSharedBorders |GridList Props | | | ContactCardsWithSmallPotraits | | | | HorizontalLinkCards | | | | ImagesWithDetails | | | | SimpleCards | | | MediaObjects | | MediaObjects Props | | Modal | CenteredWithSingleAction |Modal Props | | | SimpleAlert | | | PageHeading | CardWithAvatarAndStats |PageHeading Props | | | WithActions |WithActions Props | | | WithAvatarAndActions | | | | WithBannerImage | | | RadioGroups | Cards |RadioGroups Props | | | ColorPicker | | | | ListWithDescription | | | | ListWithDescriptionInPanel | | | | ListWithRadioOnRight | | | | SimpleList | | | | SimpleTable | | | | SmallCards | | | | StackedCards | | | SectionHeading | Simple |SectionHeading Props | | | WithTabs | | | Stats | Simple |Stats Props | | | WithBrandIcon | | | | WithSharedBorders | | | Steps | Simple |Steps Props | | | Panels | | | | Circles | | | Tables | |Tables Props | | Tabs | TabsInPills |Tabs Props | | | TabsWithUnderline | | | TextAreas | |TextAreas Props | | Toggles | ShortToggle |Toggles Props | | | ToggleWithIcon | | | | WithLeftLabelAndDescription | | | | WithRightLabel | | | Tooltip | |Tooltip Props | | VerticalNavigation | |Tooltip Props |