[ Docs ] Guidelines for UI Components

Writing Documentation for UI Components

If you would like to participate in writing the documentation for UI components, please follow the template below and refer to the example docs and the example for using primitives.

Example Docs: Accordion

Example Using UI Components: Starter-Base

Template

1. Use a <LinkButton target="_blank" /> for documentation of the primitive it uses (if applies) and another one for the demo. Find the components at https://rnr-showcase.vercel.app/components and apply that component's url to the LinkButton
2. A short description of the component.
3. Use the ## Installation heading.
4. If it uses a primitive, use the following component and replace the name and url to the appropriate primitive:

<Aside type="tip" title="Depends on a primitive">
    Before copy/pasting, add the <a href="/primitives/${primitive}" className='text-white font-bold'>${primitive} primitive</a> to your project.
</Aside>

5. Add installation steps in bold and use the <Code code={importedCode} lang="tsx" title="~/components/ui/${component}" /> for all the related files.
6. Use the ## Usage heading.
7. Show an example of usage. Avoid using the <Code /> component since the reader should see the entire usage example.
8. Use the ## Props.
9. Write each component as an h3 heading, optionally add a short description, and add a table for all of that components props. Ex:

| Prop |       Type        |                   Note                   |
| :--: | :---------------: | :--------------------------------------: |
|      |                   |                                          |