Skip to content

Steps to add a new Component. - #1

Merged
num-js merged 5 commits into
masterfrom
add-new-component
Sep 8, 2025
Merged

Steps to add a new Component.#1
num-js merged 5 commits into
masterfrom
add-new-component

Conversation

@num-js

@num-js num-js commented Sep 8, 2025

Copy link
Copy Markdown
Collaborator

🛠️ How to Add a New Component

Follow these steps to add a new component: View Full PR

  1. Create the Component
    Add your component inside registry/components. For example:
    registry/components/card-hover/card-hover.tsx.
    View Changes

  2. Document the Component
    Create an MDX file inside content/components to provide detailed documentation with previews and code examples.
    Example: content/components/card-hover.mdx.
    View Changes

  3. Update Documentation Config
    Add the component's documentation metadata in configs/componentsDocumentation.json.
    View Changes

  4. Update Sidebar Metadata
    Add the component's name and path in configs/leftSideComponentMetaData.ts to display it in the sidebar.
    View Changes

  5. (Optional) Add Component Overview
    Add metadata and a thumbnail for the component in configs/componentsOverview.ts to display it in the Components tab (/components).
    View Changes

image

Numan added 5 commits September 8, 2025 05:43
- Create your Component inside `registry/components` [registry/components/card-hover/card-hover.tsx]. This will be your actual component.
  - Create mdx file inside `content/components` to explain about Component in detailed with Preview and Code. [content/components/card-hover.mdx]
- Go to `configs/componentsDocumentation.json`, add Components's Documentation related data. This will render your mdx file[components/card-hover.mdx] in documentation page.
- Go to `configs/leftSideComponentMetaData.ts` add your Component's Name, path etc. This will show your component name in left side-bar.
- (Optional) Go to `configs/componentsOverview.ts` add your Component's meta-data along with component thumbnail (assets/preview/index.tsx). This will show your Component Card in Components tab [`/components`].
@num-js num-js added add-new-component Label for adding a new Compoennt enhancement New feature or request labels Sep 8, 2025
@num-js
num-js merged commit b7ad445 into master Sep 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

add-new-component Label for adding a new Compoennt enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant