Home > Mobile >  How to add antd or chackraUI in my design system?
How to add antd or chackraUI in my design system?

Time:10-02

I'm implementing a design system to publish on npm, for that I need to install Ant design or Chakra UI inside it, but when I try to install the design system it doesn't work. As I don't have Index.js to do the initial configuration of the libs in my design system, how can I make it work? I'm using Rollup.config technique to create design system.

Here is my project that will be published. I also accept suggestion of documentation for studies.

https://github.com/brunowbbs/wbsdesign

CodePudding user response:

I assume you mean you cant configure ant/chakra because you cant access them through the lib.

You could just export everything in the lib in your index file

export * from "antd"

Note that if your lib has exports of the same name (probably does because button is ubiquitous) you might need to instead export each thing you need individually (a bit painful, but also correct).

export { THINGS YOU NEED HERE } from "antd"

I think you can also namespace it like this

export * as Antd from 'antd'

And use it like

import { Antd } from 'your-lib'

// <Antd.TheComponentYouWant >/

But this exposes antd naming externally so id prefer former.

  • Related