Getting Started with ClearKit

ClearKit is a family of libraries to build UI at Clearbit.

clearkit React + CSS library
@clearkit/icons React icon library
@clearkit/css CSS utility library

Using clearkit library

Install the npm package

yarn add clearkit

# Using npm
npm i clearkit --legacy-peer-deps

Make sure to include --legacy-peer-deps if using npm, otherwise React and related dependencies will not be installed.

Add Tailwind config

// tailwind.config.js
const clearkit = require('clearkit');
const { clearkitTheme } = clearkit;

module.exports = {
  // other config
  presets: [clearkitTheme],
};

Import clearkit.css into root JavaScript or CSS file

// index.js, index.ts, styles.css

@import 'clearkit/dist/clearkit.css';

Import and use component

import { CKButton } from 'clearkit';

const MyButton = () => (
  <div className="mb-4">
    <CKButton> My Button</CKButton>
  </div>
);