a

2026-07-03 16:58:28 +08:00
commit 32b43f85bd
6240 changed files with 1987678 additions and 0 deletions
@@ -0,0 +1,99 @@
+# 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.
+
+   ```bash
+   git clone https://github.com/<YOUR_USERNAME>/retroui.git
+   ```
+
+3. Navigate to the project directory
+
+   ```bash
+   cd retroui
+   ```
+
+4. Create a new branch
+
+   ```bash
+   git switch -c new-branch-name
+   ```
+
+5. install dependencies
+
+   ```bash
+   pnpm i
+   ```
+
+6. Run the project
+   ```bash
+   pnpm dev
+   ```
+
+## Adding a New Component
+
+1. Create the main component in `/components/retroui/NewComponent/NewComponent.tsx`
+
+```ts
+export function NewComponent() {
+  return <div>This is your component.</div>;
+}
+```
+
+2. Export your component in `/components/retroui/NewComponent/index.ts` and `/components/retroui/index.ts`
+
+```ts
+export * from "./NewComponent";
+```
+
+3. Create a preview to showcase your component in `preview/components/new-component.tsx`
+
+```typescript
+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`
+
+```typescript
+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`
+
+```md
+---
+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.