Open UIOpen UI GitHub

Add a Component

Adding a component to Open UI is a research process. Because of this, two pages are created for each component; a research page and a curated page. Create your component pages like so:

/src
/components
your-component.mdx # curated page
your-component.research.mdx # research page

Keep reading to finish setting up your pages.

Curated Page

The curated page will summarize your findings, conclusions, and unresolved points. It will be published publicly.

Define your research page front matter. The research key tells your curated page where its research page is hosted.

---
menu: Components
name: Your Component
path: /components/your-component
research: /components/your-component.research
---
...page content

Research Page

The research page is a place to collect, analyse, and deeply understand the data available on the component. It will not be published publicly but it will remain as source material justifying your curated page.

Define your research page front matter. The researchFor key tells your research page where its curated page is hosted.

---
name: Test
path: /components/test.research
researchFor: /components/test
---
...page content

If you followed the steps in Add a design system then there are some MDX components available in Open UI's docs to help analyze and understand the data collected. You can reference some other component doc pages for usage examples. Otherwise, you can collect and analyze your data more manually.

Try it out

You should now be able to yarn start the docs and see your component in the menu. You should also have a toggle on the component page to switch between the curated page and research page.

😄 You're all set! We're looking forward to your contribution to Open UI!