@chemican/components 🎨🚀

Our React component library built with Radix UI, TailwindCSS, and TypeScript. Designed for internal company use, it provides reusable, accessible, and customizable UI components.

Please see the live component library storybook here.

---

📦 Installation

Install directly from GitHub:

npm install --save @chemican/components@git+ssh://git@github.com:GoodMoneyger/chemican_components.git#release-1.0.0-20

Note

#release-1.0.0-20 points to a specific version. You should set versions manually to avoid breaking changes.

---

🚀 Usage

Read the more detailed setup guide here.

1️⃣ Import a Component

Include the Chemican Tailwind preset in your CSS:

@import "tailwindcss"
@import "@chemican/components/tailwind-preset-next.css"
// @import "@chemican/components/tailwind-preset.css" // Use this for non-Next.js projects instead
@source "../node_modules/@chemican/components";

Then, you can use the components in your React project:

import { Button } from '@chemican/components';

function App() {
    return <Button intent="primary">Click Me</Button>;
}

2️⃣ Ensure TailwindCSS v4 is Set Up

The Chemican Component library is meant to be used with TailwindCSS and it requires to import the Chemican Tailwind preset.

---

🛠 Development

Run Storybook

To see all available components:

npm run storybook

Build the Library

npm run build

Develop within consuming project

To develop the library within a consuming project, you can use the following command to link the library:

npm link

Then, in the consuming project, link the library:

npm link @chemican/components

This will allow you to make changes to the library and see them reflected in the consuming project, which is great for dynamic development.

Note

Once you're done making changes, always make sure to open a PR and merge the changes back into the library and double-check that the consuming project still works as expected without linking.

---

Development Guidelines

Please refer to the CLAUDE.md file for detailed development guidelines, including project structure, coding standards, and best practices. Even though written for Claude Code, these guidelines are applicable to all developers working on this project.

Commit Message Rules

This project enforces commit message conventions using Commitlint and Husky.

Format:

topic1,topic2: Subject description

Rules:

• Topics: One or more comma-separated topics (component names or general categories)
• Subject: Must start with a capital letter
• Max length: 100 characters
• No period: Subject must not end with a period

Valid topics include:

• Component names (automatically detected from src/components/): button, input, select, etc.
• General categories: multiple, tokens, dev, doc, config, ci, deps, release, util, assets, refactor

Examples:

button: Add loading state prop
input,select: Update border styling
doc: Update installation instructions
tokens: Regenerate design tokens from Figma

Setup:

Commit hooks are automatically installed when you run npm install (via the prepare script). Please make sure that your setup has the hooks correctly installed to enforce the commit message rules.

Vibe coding

This project is setup to work well in AI assisted workflows, specifically using Claude Code. This is achieved as follows:

• The project uses CLAUDE.md to provide context and guidelines for Claude Code.
• The project uses Tailwind which allows AI agents to easily define styles without needing to write complex CSS.
• The corresponding Chemican Design Master Figma file is setup to work well with Figma MCP server.
• The project uses convetional React and TypeScript as much as possible.

🔄 Release Process

This library follows Semantic Versioning. To release a new version:

npm run release

This will:

• Bump the version in package.json
• Create a Git tag (vX.X.X)
• Trigger CI to push a new release branch
• Create a release-X.X.X tag for installing

---