Woonkly UIKit

Woonkly UIKit is a reusable component library that helps Woonkly contributors build UIs faster. The goal is to make building durable UIs more productive and satisfying, following Woonkly Design System guidelines

Install

Woonkly UIKit components are written in React

Add to your project.

npm install --save @woonkly/uikit

Use

Add required font into index.html:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Import stylesheet in your root app entry:

// app.tsx, app.jsx
import '@woonkly/uikit/dist/woonkly-uikit.css';

Import components you want into your UI

// view.tsx, view.jsx
import { Button } from '@woonkly/uikit';

export const View = (): JSX.Element => {
  return (
    <Button variant="primary" size="large">
      Click me
    </Button>
  );
};

Run and develop SDS locally

Clone the Woonkly UIKit GitHub project then start Storybook.

npm install && npm run storybook

🌱 Third Party Dependencies

This is a list of dependencies that are user for this module:

• Storybook
• Tailwindscss
• Rollup
• Typescript
• classnames
• React Router DOM

⚠️ License

Copyright (c) 2021-present Woonkly and Contributors. @woonkly/uikit is free and open-source software licensed under the MIT License.