## @incard/ui

Welcome to incard's UI Kit. This is a Typescript React component library that uses [TailwindCSS](https://tailwindcss.com) for styling.

### Concepts

There are a few key components to this library:

1. [Component library](./src/components)
   <br/>
2. [TailwindCSS preset](./src/preset/index.js)
   <br/>
3. [Base styles](./src/index.css)

The components directory is where all of the React components live. Each component has its own file (or directory if required), and the default export of each file is the component itself.

The [tailwind preset](./src/preset/index.js) is our source of truth for colors throughout the component library.

The [base styles](./src/index.css) are our
source of truth for typography styles throughout the component library.

### Component Library

The component library is structured as follows: each core component has its own file/directory. Each component has Typescript definitions for its properties and uses TailwindCSS for styling.

### Tailwind preset

The TailwindCSS preset included in this library is intentionally configurable.

To get started, add the following lines of code to your project's `tailwind.config.js` —

```js
const incardUi = require('@incard/ui/preset');

module.exports = {
  // ... the rest of your tailwind configuration
  presets: [incardUi()],
};
```

### Base styles

We prefer to define styles for text at the global CSS level for fine-tuned control of kerning and other styling attributes.

The base styles include font stylings for many different text elements. You can read more about these in [index.css](./src/index.css).

### Demo

You can test out the current production components in our [Storybook]. Each component has its own story, as well as multiple examples for possible variations. If you don't see the variation you're looking for, you can either use the "knobs" provided to set certain attributes manually, or style the components in your own project by passing the `className` property to the component where applicable.

### Example

Now that you've read our documentation, you're almost ready to go. In case you need a little nudge to get started, we've included a short example of how you can use one of our components:

```tsx
import { Tooltip } from '@incard/ui';

export default function Index() {
  return <Tooltip text="Welcome to incard UI." />;
}
```
