CK Component Library

A reusable React component library with SCSS theming, built using Vite and TypeScript. Designed for use across multiple applications, including web apps and browser extensions.

✨ Features

• ⚛️ React 18 + TypeScript
• 🎨 SCSS theming with custom CSS variables
• 📦 Library bundling with Vite
• 💅 CSS Modules support for style encapsulation
• 🧩 Ready-to-use shared components (e.g., Button)
• 📁 Clean and modular project structure

📦 Installation

To use the component library in your app:

npm install @ck-ui/component-library
# or
yarn add @ck-ui/component-library

🧭 Naming Convention

The library follows a consistent ckcl prefix for design-system tokens and utility classes.

• CSS variables (tokens): --ckcl-<category>-<scale>
  • Examples: --ckcl-primary-500, --ckcl-fs-sm, --ckcl-spacing-md
• Background utility classes: ckcl-<palette>-bg-<step>
  • Examples: ckcl-primary-bg-500, ckcl-black-bg-50
• Text color utility classes: ckcl-<palette>-<step>
  • Examples: ckcl-primary-500, ckcl-green-300, ckcl-white
• Font-size utility classes: ckcl-fs-<size>
  • Examples: ckcl-fs-xs, ckcl-fs-md, ckcl-fs-xl
• Typography preset classes: ckcl-<type>-<size>-<weight>
  • Examples: ckcl-h1-bold, ckcl-body-sm-med, ckcl-cap-reg
• Component class names (SCSS Modules): prefixed with ckcl-
  • Example: ckcl-button
• React components: PascalCase
  • Examples: Button, Checkbox, DesignSystemShowcase

Component and file structure

• Folder per component: lib/components/<ComponentName>/
• Main component file: index.tsx
• Storybook file: <ComponentName>.stories.tsx
• Styles file: styles.module.scss

🔗 Local Development with npm link

Use npm link when developing this package and consuming it in another local app.

1) Build and link the library

From this library repository:

npm install
npm run build
npm link

2) Link it in your consuming app

From your consuming app repository:

npm link @ck-ui/component-library

3) Use in your app

import { Button, CKThemeProvider } from "@ck-ui/component-library";
import "@ck-ui/component-library/dist/assets/Theme.css";

export function App() {
  return (
    <CKThemeProvider>
      <Button variant="primary">Click me</Button>
    </CKThemeProvider>
  );
}

4) Rebuild while developing

When you make changes in the library, rebuild to reflect updates in the linked app:

npm run build

Or run watch mode:

npm run dev:lib

5) Unlink when done

In consuming app:

npm unlink @ck-ui/component-library
npm install

In library repo:

npm unlink

🎨 Using theme.css in any project

theme.css contains the global design tokens (--ckcl-*) and utility classes (ckcl-*). Import it once at app startup before using component classes.

React / Vite / CRA

Add this in your entry file (main.tsx, index.tsx, or App.tsx):

import "@ck-ui/component-library/dist/assets/Theme.css";

Next.js

Import in app/layout.tsx (App Router) or pages/_app.tsx (Pages Router):

import "@ck-ui/component-library/dist/assets/Theme.css";

Plain HTML / vanilla JS

<link rel="stylesheet" href="./node_modules/@ck-ui/component-library/dist/assets/Theme.css" />

Optional: override tokens for your brand

You can override any token after importing theme.css:

:root {
  --ckcl-primary-500: #1d4ed8;
  --ckcl-font-family-base: "Inter", sans-serif;
}

Quick usage example

import "@ck-ui/component-library/dist/assets/Theme.css";

export function Demo() {
  return (
    <div className="ckcl-primary-bg-50" style={{ padding: "16px" }}>
      <p className="ckcl-h3-bold ckcl-primary-500">Hello from CK Theme</p>
      <p className="ckcl-body-sm-reg ckcl-black-500">Utility classes are ready to use.</p>
    </div>
  );
}