CONTRIBUTING.md

Contributing to RetroUI

Thank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get started.

Getting Started

1. Fork this repository

2. Clone the forked repository to your local machine.

   git clone https://github.com/<YOUR_USERNAME>/retroui.git

3. Navigate to the project directory

   cd retroui

4. Create a new branch

   git switch -c new-branch-name

5. install dependencies

   pnpm i

6. Run the project

   pnpm dev

Adding a New Component

1. Create the main component in /packages/ui/NewComponent/NewComponent.tsx

export function NewComponent() {
  return <div>This is your component.</div>;
}

2. Export your component in /packages/ui/NewComponent/index.ts and /packages/ui/index.ts

export * from "./NewComponent";

3. Create a preview to showcase your component in preview/components/new-component.tsx

export default function NewComponentStyle() {
  return (
    <span className="px-2.5 py-1 text-sm font-semibold border-2 border-red-600 text-red-600">
      Error
    </span>
  );
}

4. Add your component preview to the list of components registry in config/components.ts

export const componentConfig = {
  registry: {
    ...
    "new-component": {
      name: "new-component",
      filePath: "preview/components/new-component.tsx",
      preview: lazy(() => import("@/preview/components/new-component")),
    },
  },
};

5. Add documentation for your component in content/docs/components/...mdx

---
title: Badge
description: The component that looks like a button but isn't clickable!
lastUpdated: 08 Oct, 2024
---

...

### New Component

<ComponentShowcase name="new-component" /> // name of the component in the registry

Ask for Help

For any help or questions, please open a new GitHub issue.