@genesisx/design-system

Introducing Genesisx/Design-System Plugin: Empowering Seamless Design Integration

GenesisX/Design-System is a powerful plugin that seamlessly integrates design systems into your ReactJS projects. By effortlessly generating design system configurations, our plugin ensures consistent design across your entire application, saving you valuable development time.

With a focus on simplicity and flexibility, @genesisx/design-system caters to developers of all levels. Leveraging the capabilities of Code Shaper, facilitates rapid prototyping by expediting the code generation process fast and efficiently.

Whether you're working on a personal project or collaborating on a large-scale application, @genesisx/design-system streamlines your workflow and enhances collaboration. Seamlessly integrating with your existing toolchain, it allows you to concentrate on crafting exceptional user experiences.

Usage

We prioritize delivering first-class documentation to our users. To facilitate easy navigation and understanding, we have organized our documentation in a clear and structured manner.

• Quick Start
• Storybook
• CLI Generator Tools

Quick Start

Install the below package in your project

npx @genesisx/design-system

You can run use this in both polyrepo and monorepo architectures.

The plugin employs the following frameworks and tools for its implementation: Radix UI, Tailwind, Storybook, and Vite.

Storybook

You can start the Storybook development server by running the following command:

npm run storybook

Once the server is up and running, you can access Storybook by opening your web browser and navigating to http://localhost:3002.

You can build the static files for production by running the following command:

npm run build-storybook

CLI Generator Tools

The plugin is equipped with robust tools that enable you to easily generate custom components, hooks, pages, stores, and services by utilizing the following command:

npm run generate

Automating the component generation process makes it really easy for the teams to maintain consistency across project and saves a lot of development time.

More details & Troubleshooting