Contributing

Welcome Contributors!

Thank you for your interest in contributing to Tessina 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:

Terminal

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

Install dependencies:

Terminal

pnpm install

Development Workflow

Building the Library

Terminal

pnpm build

Watch Mode

For development with hot reload:

Terminal

pnpm dev

Running Tests

Terminal

pnpm test

Linting

Terminal

pnpm lint

Formatting

Terminal

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:

example.tsx

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

3. Write Tests

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

example.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:

example.plaintext

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:

Terminal

git checkout -b feat/your-feature-name

Make your changes and commit:

Terminal

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

Push to your fork:

Terminal

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 Tessina 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.

Welcome Contributors!

Thank you for your interest in contributing to Tessina 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:

Terminal

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

Install dependencies:

Terminal

pnpm install

Development Workflow

Building the Library

Terminal

pnpm build

Watch Mode

For development with hot reload:

Terminal

pnpm dev

Running Tests

Terminal

pnpm test

Linting

Terminal

pnpm lint

Formatting

Terminal

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:

example.tsx

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

3. Write Tests

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

example.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:

example.plaintext

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:

Terminal

git checkout -b feat/your-feature-name

Make your changes and commit:

Terminal

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

Push to your fork:

Terminal

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 Tessina 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.

On this page

On this page