Codux Help Center
Browse our articles to find the answers you need
Using Component Libraries in Codux
If your project uses third party component libraries that are part of our supported technologies stack (or one of your own component libraries), you can add them like any other component in Codux. To preview and add components from your library through the Add Elements panel, follow one of these methods:
- Add one of our rich content packages.
- Add your own component library to Codux.
- Map components and their paths through a JSON file.
Codux presents third party components right in the Add Elements panel, ready for immediate consumption in your project.
![](https://wixmp-b7f7090100b13623109851bc.wixmp.com/e359bdcc8b57f3acc6fe004f55f59d3e.png)
Option 1: Our Rich Content Packages
You can use our rich content package for access to a collection of ready-made component variations with all the necessary imports, hooks, states, JSX properties, styling, and more. They’ll be immediately available for use in your project with little to no effort, and you’ll be able to see their previews in the Add Elements panel before adding them to boards. Codux currently provides rich content for the following third party component libraries:
Component Library | How to Add | Relevant Documentation |
---|---|---|
Blueprint | Npm package | |
Semantic UI | New project, npm package | |
Nivo | New project, npm package |
For other component libraries that don't yet have rich content available, use the
codux-external-components.json
file solution described below.Option 2: Add your own component library
You can create and publish your own component library so that it can be consumed visually through the Add Elements panel in Codux projects. Refer here for step-by-step instructions.
Option 3: Mapping Components and Paths
To add component libraries not yet listed in the table above to the Add Elements panel, you'll need to create a JSON file in the project's root directory with mappings between the components and their import paths. See how here.
Was this article helpful?