MCC's Design System for building consistent and reusable interfaces with React + Tailwind CSS.
npm install mcc-brick-ui
src/
├── index.ts # Main entry point of the library
└── components/
├── atoms/
└── molecules/
└── component-name/
├── index.tsx
└── component-name.stories.tsx
`
> Note: Always use kebab-case naming convention for folders and files.
---
Installing the project locally
`bash
npm install
`
---
Running Storybook
`bash
npm run storybook
`
---
Creating new components
1. Create the component inside the src/components folder
2. Create the corresponding .stories.tsx file
3. Export it in src/index.ts
---
Using Brick UI in another React project
$3
In your React project, install the package:
`bash
npm install mcc-brick-ui
`
$3
1. Import the plugin and safelist from the package inside your Tailwind
configuration file.
`ts
// tailwind.config.ts
import { brickPlugin, safelist } from 'mcc-brick-ui';
export default {
content: ['./src/*/.{js,ts,jsx,tsx}'],
safelist,
plugins: [brickPlugin],
};
`
2. Build your CSS using Tailwind so the plugin theme is applied. A typical
command looks like:
`bash
npx tailwindcss -i ./src/index.css -o ./dist/index.css \
--config ./tailwind.config.ts --minify
`
3. If you prefer, you can import the precompiled styles directly in your global
stylesheet:
`css
@import 'mcc-brick-ui/dist/styles.css';
`
---
Tests
> Not configured yet.
Publishing a new version to NPM
$3
If you don't have one yet, create it at: https://www.npmjs.com/signup
$3
Ask one of the current owners to run:
`bash
npm owner add your-npm-username package-name
`
Steps to publish
$3
`bash
npm login
`
$3
Useful if you have multiple NPM accounts.
`bash
npm whoami
`
$3
`bash
npm run build
`
$3
Choose the appropriate semantic version increment:
- patch → bug fixes
- minor → new features without breaking changes
- major → breaking changes (less common)
`bash
npm version patch
or
npm version minor
or
npm version major
`
Publish to NPM
1. Generate an Access Token
If you already have a token, you can skip this step.
1. Go to https://www.npmjs.com/
2. Log in to your account
3. Click on your profile picture → Account
4. Go to Access Tokens
5. Click Generate New Token
$3
- Publish → Recommended for local development
- Automation → Recommended for CI/CD pipelines
- Read-only → Cannot publish packages
For local usage, use Publish.
6. Confirm the action using 2FA
7. Copy the generated token (it will not be shown again)
---
2. Configure the Token Locally
`bash
npm config set //registry.npmjs.org/:_authToken=YOUR_TOKEN_HERE
`
3. Publish
Once the token is configured, publish the package normally:
`bash
npm publish
`
Check publication
`bash
npm info package-name
``