Skip to main content

​
Contributing to RigidUI

Thank you for your interest in contributing to RigidUI! We welcome contributions from the community, whether it’s new components, bug fixes, documentation improvements, or feature enhancements.
Before contributing, please read and follow our Code of Conduct to foster an inclusive and respectful community.

​
Getting Started

1

Fork and Clone

Fork the RigidUI repository and clone it to your local machine:
git clone https://github.com/YOUR_USERNAME/rigidui.git
cd rigidui
2

Install Dependencies

Install project dependencies using pnpm:
pnpm install
We recommend using pnpm for development to ensure consistency with the project setup.
3

Start Development Server

Launch the development server to see your changes in real-time:
pnpm run dev
Visit http://localhost:3000 to view the documentation site.
4

Build the Registry

Build the component registry to test your changes:
pnpm run build

​
Project Structure

Understanding the project structure will help you navigate the codebase: 
rigidui/
├── app/                    # Next.js app directory
│   ├── docs/               # Documentation pages
│   ├── registry/           # Registry API route
│   └── page.tsx            # Homepage
├── components/             # Shared components
├── registry/               # Registry components
│   └── new-york/           # New York style components
│       └── component-name/ # Individual component directories
│           ├── component-name.tsx       # Main component file
│           └── component-name-demo.tsx  # Demo component
├── lib/                    # Utility functions and hooks
├── registry.json           # Registry configuration file
└── tailwind.config.ts      # Tailwind configuration

​
Component Guidelines

When creating or modifying components, follow these essential guidelines:

Self-Contained

Components should be self-contained with minimal external dependencies

Accessible

Follow WAI-ARIA guidelines and ensure keyboard navigation works

Responsive

Components should work well on all screen sizes

Customizable

Use Tailwind CSS classes and accept className props

TypeScript

Write proper TypeScript types for all props and functions

Dark Mode

Support both light and dark modes out of the box

Documented

Include JSDoc comments and create demo files

Tested

Test components thoroughly before submission

​
Creating a New Component

Follow these steps to create a new component for RigidUI:
1

Create Component Directory

Create a new directory in registry/new-york/ with your component name:
mkdir -p registry/new-york/your-component
2

Create Component File

Create the main component file with TypeScript and JSDoc comments:
// filepath: registry/new-york/your-component/your-component.tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";

export interface YourComponentProps {
  /** Description of prop */
  someProp?: string;
  /** Additional class names */
  className?: string;
  /** Children elements */
  children?: React.ReactNode;
}

/**
 * YourComponent - Description of what it does
 */
export function YourComponent({
  someProp = "default",
  className,
  children,
}: YourComponentProps) {
  return (
    <div className={cn("your-default-classes", className)}>
      {/* Component implementation */}
      {children}
    </div>
  );
}
Use the cn utility function from @/lib/utils to merge class names properly.
3

Create Demo File

Create a demo file to showcase your component (optional but recommended):
// filepath: registry/new-york/your-component/your-component-demo.tsx
"use client";

import React from "react";
import { YourComponent } from "./your-component";

export function YourComponentDemo() {
  return (
    <div className="space-y-8">
      <YourComponent someProp="value">
        Demo content
      </YourComponent>

      {/* Add more examples with different props */}
    </div>
  );
}
4

Update Registry

Add your component to the registry.json file:
{
  "name": "your-component",
  "type": "registry:component",
  "title": "Your Component",
  "description": "Description of your component",
  "registryDependencies": [
    "button" // Add any dependencies here
  ],
  "files": [
    {
      "path": "registry/new-york/your-component/your-component.tsx",
      "type": "registry:component"
    }
  ],
  "author": "Your Name <[email protected]>"
}
5

Create Documentation

Create documentation in app/docs/components/your-component/page.tsx to help users understand how to use your component.

​
Pull Request Process

1

Create a Branch

Create a descriptive branch name for your changes:
git checkout -b feature/component-name
Use prefixes like feature/, fix/, docs/, or refactor/ to categorize your changes.
2

Make Your Changes

Implement your component or changes following the component guidelines above.
3

Test Thoroughly

Test your component in different scenarios:
  • Different screen sizes (mobile, tablet, desktop)
  • Light and dark modes
  • Keyboard navigation
  • Edge cases and error states
4

Update Documentation

If you’re adding a new feature or component, update the documentation accordingly.
5

Create a Changeset

Document your changes using changesets:
npx changeset
Follow the prompts to describe your changes in a user-friendly way.
6

Commit Your Changes

Commit your changes following the commit guidelines:
git add .
git commit -m "feat(your-component): add new component"
7

Push and Create PR

Push your branch and create a pull request:
git push origin feature/component-name
Then create a pull request to the main branch on GitHub.
8

Respond to Feedback

Be responsive to feedback from maintainers and make requested changes promptly.

​
Commit Guidelines

We follow Conventional Commits for clear and consistent commit messages:
  • feat: - A new feature
  • fix: - A bug fix
  • docs: - Documentation changes
  • style: - Code style changes (formatting, etc.)
  • refactor: - Code changes that neither fix bugs nor add features
  • perf: - Performance improvements
  • test: - Adding or updating tests
  • chore: - Changes to the build process or auxiliary tools
feat(currency-manager): add support for custom decimal places
fix(smart-search): resolve keyboard navigation issue
docs(installation): update prerequisites section
refactor(file-explorer): simplify file tree logic

​
Component Quality Checklist

Before submitting your component, ensure it meets these quality standards:
  • Component is properly typed with TypeScript
  • JSDoc comments are included for props and functions
  • Code follows the project’s formatting standards
  • No console.log or debug statements left in code
  • Component is self-contained with minimal dependencies
  • Component works as expected in all scenarios
  • Error states are handled gracefully
  • Loading states are implemented where appropriate
  • Component accepts className prop for customization
  • Default values are sensible and well-documented
  • Component is keyboard navigable
  • ARIA attributes are used appropriately
  • Focus states are visible and logical
  • Screen reader compatibility is tested
  • Color contrast meets WCAG standards
  • Component works on mobile, tablet, and desktop
  • Dark mode is fully supported
  • Tailwind CSS classes are used for styling
  • Component respects user’s reduced motion preferences
  • Spacing and sizing are consistent with other components
  • Demo file is created to showcase usage
  • Component is added to registry.json
  • Documentation page is created in app/docs
  • Props and usage examples are clearly documented
  • Edge cases and limitations are noted

​
Need Help?

If you have questions or need assistance:

GitHub Discussions

Ask questions and discuss ideas with the community

GitHub Issues

Report bugs or request new features
Don’t be afraid to ask for help! The RigidUI community is friendly and welcoming to contributors of all experience levels.

​
Recognition

All contributors will be recognized in our documentation and README. We appreciate every contribution, no matter how small!
By contributing to RigidUI, you agree that your contributions will be licensed under the MIT License.
Thank you for contributing to RigidUI and helping make it better for everyone!

Build docs developers (and LLMs) love

Get started for freeTalk to us