@kathedevsigns/uikit NPM

🌟 Kathedevsigns Storybook

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

💫 Install

Kathedevsigns UIKit components are written in React

Add to your project.

npm install --save @kathedevsigns/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 '@kathedevsigns/uikit/dist/kathedevsigns-uikit.css';

Import components you want into your UI

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

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

⚡️ Run and develop SDS locally

Clone the Kathedevsigns UIKit GitHub project then start Storybook.

npm install && npm run storybook

🚀 New Features added

💡 Instant Server Start
⚡️ Lightning Fast HMR
🎨 Custom Styling
📦 Optimized Build
🔩 Atomic Design
🔑 Fully Typed

📚 How to contribute

Prerequisites, must have:

Node.js v18+
NPM v9+
EditorConfig for VS Code Install
Prettier Install Prettier
Eslint Install Eslint
Tailwind CSS IntelliSense Install Tailwind CSS IntelliSense
Familiarity with pull requests and issues.

🌱 PR Format to contribute:

Ticket:

* Link of Jira Ticket

Description:

* Description about the task

Type of change:

[x] Fix (non-breaking change which fixes an issue)
[] Feature (non-breaking change which adds functionality)
[] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[] Other, chore, refactor

Changes:

* Description of changes

Screenshots (if apply)