Polaron Design System

A reusable and shareable React component library styled with Tailwind CSS. Built for teams and individuals who want consistent UI components and a custom Tailwind theme across multiple projects.

✨ Features

• ⚛️ React components with full TypeScript support
• 🎨 Customizable Tailwind CSS theme
• 📦 Build-ready with Rollup
• 🪄 Easy to extend via Tailwind presets
• 📁 Exported tailwind.config for consistent theming across apps

📦 Installation

npm install @coolsday/polaron-design-system

🚀 Usage

Import Components

import { Button } from '@coolsday/polaron-design-system';

function App() {
  return <Button>Click me</Button>;
}

🎨 Using the Shared Tailwind Config

To apply the design system’s theme in your project:

1. Create a tailwind.config.js in your app root
2. Use the preset from the design system

// tailwind.config.js
const designSystem = require('@coolsday/polaron-design-system/tailwind/tailwind.config');

module.exports = {
  presets: [designSystem],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

🧱 Folder Structure

@coolsday/polaron-design-system/
├── src/
│   ├── components/
│   │   └── Button.tsx
│   └── styles/
│       └── index.css
├── tailwind/
│   └── tailwind.config.js
├── package.json
├── tsconfig.json
├── postcss.config.js
└── rollup.config.js

🛠 Development

Install Dependencies

npm install

Build the Library

npm run build

This creates a production-ready build in the dist/ folder.

📦 Publishing to npm

1. Make sure you're logged in:

npm login

2. Publish the package:

npm publish --access public

🧩 Tailwind Theme (Preset)

Shared in tailwind/tailwind.config.js:

theme: {
  extend: {
    colors: {
      brand: {
        light: '#3ABFF8',
        DEFAULT: '#1E40AF',
        dark: '#1E3A8A',
      },
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
  },
}

Usage in your app:

<div className="bg-brand text-white font-sans">Hello</div>

📘 Components

| Component | Description | | --------- | ---------------------------------------------- | | Button | A basic button component with Tailwind styling |

📄 License

MIT — © Polaron Solar Corp

🔗 Coming Soon (Optional)

• [ ] Storybook integration
• [ ] CI/CD with GitHub Actions
• [ ] More reusable components (e.g. Input, Card, Modal)