Contributing

Thank you for your interest in contributing to uicomponents.dev! This guide will help you get started.

Why Contribute?

By contributing to uicomponents.dev, you're helping thousands of developers build better user interfaces. Your contributions:

• Help the open-source community grow
• Improve your own skills through code review
• Build your portfolio and public presence
• Get recognized as a contributor on our site
• Shape the future of UI component libraries

Ways to Contribute

Submitting a Component

Before You Start

Before submitting a new component, please:

• Check if a similar component already exists
• Review our Component Standards
• Ensure your component meets our Accessibility Requirements
• Test your component thoroughly

File Structure

Components should follow this structure:

components/
└── [category]/
    └── [component-name]/
        ├── index.tsx          # Main component export
        ├── [component].tsx    # Component implementation
        ├── [component].test.tsx # Tests (optional but encouraged)
        └── demo.tsx           # Demo/example usage

# Example:
components/
└── forms/
    └── button/
        ├── index.tsx
        ├── button.tsx
        └── demo.tsx

Naming Conventions

• Use PascalCase for component names (e.g., Button, DropdownMenu)
• Use camelCase for files (e.g., button.tsx, dropdown-menu.tsx)
• Be descriptive but concise
• Avoid generic names like Component or Item

Code Standards

All components must:

• Be written in TypeScript with proper type definitions
• Use Tailwind CSS for styling
• Follow our Code Style Guide
• Include proper JSDoc comments for props
• Export both the component and any related types

Accessibility Requirements

Accessibility is not optional. All components must:

• Meet WCAG 2.1 AA standards minimum
• Support keyboard navigation
• Work with screen readers
• Have visible focus indicators
• Support reduced motion preferences
• Have proper ARIA attributes where needed

Submission Process

1. 1

   Fork the Repository

   Fork the repository on GitHub.

2. 2

   Create a Branch

   Create a feature branch: git checkout -b feat/add-button-component

3. 3

   Add Your Component

   Add your component following the file structure above.

4. 4

   Submit a Pull Request

   Open a PR with a clear description of your component and any relevant screenshots.

Review Process

All submissions go through a review process to ensure quality and consistency:

• Automated checks: Linting, type checking, and build verification
• Code review: At least one maintainer will review your code
• Accessibility review: Components are tested for accessibility
• Design review: Visual consistency with the library

Licensing

By contributing to uicomponents.dev, you agree that your contributions will be licensed under the MIT License. This means:

• Your code can be freely used by anyone
• Your code can be modified and distributed
• You retain copyright to your contributions
• You grant us permission to use your contributions

Code of Conduct

We're committed to providing a welcoming and inclusive experience for everyone:

• Be respectful and constructive in all interactions
• Welcome newcomers and help them learn
• Focus on what's best for the community
• Show empathy towards others
• Harassment and discrimination will not be tolerated