@feedloop/uikit

Feedloop UI Kit.

This is the source code of the Feedloop UI Kit, based on Chakra UI. It contains our base Chakra UI theme, as well as components that extend from the base Chakra UI.

Usage

Prerequisites

This packages requires that you have the latest version of Chakra UI installed. Please install them first.

# yarn
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

# npm
npm install --save @chakra-ui/react @emotion/react @emotion/styled framer-motion

You will also need the Feedloop icon library.

# yarn
yarn add @feedloop/icon

# npm
npm install --save @feedloop/icon

(Optional) To install the brand typefaces of Qore, you can also install the Inter and Overpass typefaces. You can include them from Google Fonts, or directly from npm with the following packages:

# yarn
yarn add @fontsource/inter @fontsource/overpass

# npm
npm install --save @fontsource/inter @fontsource/overpass

Installation

Once all prerequisites above have been installed, you can now install the Feedloop UI Kit.

# yarn
yarn add @feedloop/uikit

# npm
npm install --save @feedloop/uikit

Usage

Theme provider

Before you use the Feedloop UI Kit component, you will need to apply the theme provider as well as the default global styles. Wrap your app inside the theme provider to do so.

import { FeedloopThemeProvider } from '@feedloop/uikit';

export default function MyApp({ children }) {
  return <FeedloopThemeProvider>{children}</FeedloopThemeProvider>;
}

This does not replace any built-in Chakra UI themes, rather extending on top of it. So if you use any components that rely on the default Chakra UI theme, you can still use them without any problems.

Using components

To use the components provided by Feedloop UI Kit, import them as follows:

// Example for `<Button />` component.

import * as React from 'react';
import { Button } from '@feedloop/uikit';

export default function Component() {
  return <Button>Push Me</Button>;
}

Read the Storybook for more examples. Please read the source of each component's Storybook file to learn how to use each component.

Using Chakra UI props

Most of Feedloop UI Kit's custom components extend the props of its Chakra UI counterpart. Please follow the Chakra UI docs to learn about these components.

Importing built-in Chakra UI components

Feedloop UI Kit also exports built-in Chakra UI components under the Chakra namespace. If you would rather colocate your components in one single import, you can import the Chakra namespace directly from @feedloop/uikit.

import * as React from 'react';
import { Chakra, Badge } from '@feedloop/uikit';

export function MyComponent() {
  return (
    <Chakra.Stack spacing="4">
      <Chakra.Box>Box imported from Chakra UI</Chakra.Box>
      <Chakra.HStack spacing="4">
        <Badge>badge from UI Kit</Badge>
        <Badge>badge from UI Kit</Badge>
        <Badge>badge from UI Kit</Badge>
      </Chakra.HStack>
    </Chakra.Stack>
  );
}