CyberEngineX UI Kit

A reusable UI component library built on top of Chakra UI designed for modern React and Next.js applications.
This project uses Storybook for development and documentation, and tsdown for building and publishing.

Peer Dependencies

This UI kit is built on top of Chakra UI and React, which are treated as peer dependencies and are not bundled in the build output.

You must install the following packages in your consuming application:

npm install react react-dom @chakra-ui/react @emotion/react

or using yarn:

yarn add react react-dom @chakra-ui/react @emotion/react

or using pnpm:

pnpm add react react-dom @chakra-ui/react @emotion/react

Why peer dependencies?

• Prevents duplicate React or Chakra instances
• Allows the consumer to control framework versions
• Reduces bundle size
• Avoids theme and context conflicts

Scripts

This project includes several npm scripts to support development, formatting, building, and publishing the UI library.

Storybook

Run Storybook locally for component development and visual testing:

npm run storybook

Storybook will start at:

http://localhost:6006

Code Formatting

Check code formatting using Prettier:

npm run format:check

Automatically format all supported files:

npm run format:write

Supported file types:

• .js
• .jsx
• .ts
• .tsx

Build (Library Output)

Build the UI library using tsdown.
This generates the production-ready files inside the dist/ directory.

npm run tsdown:build

Publish to npm

Build and publish the package to the npm registry:

npm run publish:pkg

This command:

1. Builds the library using tsdown
2. Publishes the contents of dist/ to npm

⚠️ Important

• Make sure the version field in package.json is updated before publishing
• Published versions cannot be overwritten

Notes

• Storybook is used for development and documentation only
• The published package contains compiled output only (dist/)
• React and Next.js are treated as peer dependencies to avoid duplication
• The library is optimized for tree-shaking in modern bundlers