Contributing

Welcome Contributors!

Thank you for your interest in contributing to Tessera UI! We welcome contributions from the community.

Getting Started

Prerequisites

Node.js 18 or higher
pnpm package manager
Git

Fork and Clone

Fork the repository on GitHub
Clone your fork locally:

git clone https://github.com/YOUR_USERNAME/ui.git
cd ui

Install dependencies:

pnpm install

Development Workflow

Building the Library

pnpm build

Watch Mode

For development with hot reload:

pnpm dev

Running Tests

pnpm test

Linting

pnpm lint

Formatting

pnpm format

Adding a New Component

When adding a new component, follow these steps:

1. Create the Component File

Add your component to src/components/ui/:

src/components/ui/your-component.tsx

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const yourComponentVariants = cva(
  "base-classes",
  {
    variants: {
      variant: {
        default: "default-classes",
      },
      size: {
        default: "default-size",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

export interface YourComponentProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof yourComponentVariants> {}

const YourComponent = React.forwardRef<HTMLDivElement, YourComponentProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(yourComponentVariants({ variant, size, className }))}
        {...props}
      />
    );
  }
);
YourComponent.displayName = "YourComponent";

export { YourComponent, yourComponentVariants };

2. Export from Index

Add to src/index.ts:

export { YourComponent, yourComponentVariants, type YourComponentProps } from "./components/ui/your-component";

3. Write Tests

Add tests in src/components/ui/__tests__/your-component.test.tsx:

import { render } from "@testing-library/react";
import { YourComponent } from "../your-component";

describe("YourComponent", () => {
  it("renders correctly", () => {
    const { container } = render(<YourComponent />);
    expect(container.firstChild).toBeInTheDocument();
  });
});

4. Document the Component

Add documentation in the docs/content/docs/components/ directory.

Code Style

Use TypeScript for type safety
Follow the existing code structure
Use Prettier for formatting
Follow ESLint rules
Write meaningful commit messages

Commit Guidelines

We follow conventional commits:

feat: add new Card component
fix: resolve Button hover state bug
docs: update installation guide
chore: upgrade dependencies

Pull Request Process

Create a new branch for your feature:

git checkout -b feat/your-feature-name

Make your changes and commit:

git add .
git commit -m "feat: add your feature"

Push to your fork:

git push origin feat/your-feature-name

Create a Pull Request on GitHub
Wait for review and address any feedback

Questions?

If you have questions, feel free to:

Open an issue on GitHub
Join our community discussions
Check existing issues and PRs

License

By contributing to Tessera UI, you agree that your contributions will be licensed under the MIT License.

Code of Conduct

Please be respectful and constructive in all interactions. We're building a welcoming community for everyone.

Contributing

On this page