Logo

Kaif UI

logoKaif UI

Contribution Guide

Thank you for your interest in contributing to Kaif UI! Your contributions are invaluable in helping us improve the library and make it a better tool for developers.

Contribution Rules

  • Follow the existing code style
  • Write clear and concise comments
  • Run linting and formatting tools
  • Run the test suite to ensure your changes don't break existing functionality.
  • Treat other contributors with respect and professionalism.
  • Do not push directly to the main branch

These rules may be updated from time to time to reflect changes in the project or community.

Getting Started with Contributing to Kaif UI

Fork the Repository

Create a personal copy of Kaif UI on your GitHub account to start contributing.

Go to the Kaif UI GitHub repository and click on the "Fork" button at the top right. This will create a copy of the repository under your GitHub account.

Clone Your Forked Repository

git clone https://github.com/YourUsername/kaif-ui.git

Replace YourUsername with your GitHub username.

Install Dependencies

npm install

Create a New Branch

Important: Before making any changes, create a separate branch for your component to keep the main branch clean.

git checkout -b your-feature-branch

Replace your-feature-branch with a descriptive name for your feature or component.

Here, If you want to contribute the component, Head over to the following directory:

@/components/kaif-ui/components

And if you want to contribute the block, Head over to the following directory:

@/components/kaif-ui/blocks

Create Your Component or Block

In the components folder, create your component:

@/components/kaif-ui/components/YourComponent/YourComponent.tsx

Add Documentation

After creating the component, navigate to:

@/content/docs/components

Here, Create a new .mdx file for your component or block:

@/content/docs/components/yourcomponent.mdx

Example .mdx Structure

---
title: Your Component Name
description: Describe of your component.
---
 
import YourComponent from "@/components/kaif-ui/components/YourComponent/YourComponent";
 
import { Tabs, Tab } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";
 
<div className="space-y-2 mb-4">
  <h1 class="scroll-m-20 text-4xl font-bold tracking-tight text-black dark:text-white">
    Your Component Name
  </h1>
  <p class="text-lg text-muted-foreground">
    Short description of your component
  </p>
</div>
 
<Tabs items={["preview", "code"]} className="my-4">
  <Tab value={"preview"}>
    <div className="bg-background rounded-xl">
      <YourComponent />
    </div>
  </Tab>
  <Tab value={"code"}>your component usage code here in .tsx</Tab>
</Tabs>
 
<h1 class="scroll-m-20 text-2xl font-bold tracking-tight text-black dark:text-white my-4">
  Installation
</h1>
 
// describe the steps: how developer can you component in their project
 
here is the example steps
 
<Steps>
  <Step>
    ### Install Dependencies
 
    npm i dependencies-of-your-component
 
  </Step>
  <Step>
    ### Copy the source code
 
    // core code of your component
 
  </Step>
</Steps>
 
<h1 class="scroll-m-20 text-xl font-bold tracking-tight text-black dark:text-white my-4">
  Tech Stack of Your Component
</h1>
 
<Cards>
  <Card title="React" />
  <Card title="Next.js" />
  <Card title="Tailwind CSS" />
  <Card title="TypeScript" />
</Cards>
 
<h1 class="scroll-m-20 text-xl font-bold tracking-tight text-black dark:text-white mt-12">
  Props
</h1>
 
<TypeTable
  type={{
    className: {
      description: "Optional class names to style the button component.",
      type: "string",
      default: "undefined",
    },
    children: {
      description:
        "The content to be rendered inside the button, typically text or icons.",
      type: "React.ReactNode",
      default: "undefined",
    },
  }}
/>

Display Your Component or Block

To display your component in Kaif UI, add it in the componentsData.tsx file:

@/data/componentsData.tsx

Here is the example:

{
  name: "Emoji Nav",
  supportLine: "Emoji Nav: Think Different, Navigate with Fun.",
  imageUrl: "/components/emoji-nav.png",
  mdxPath: "components/emojinav.mdx" // no need to add "@/content/docs/"
},

Add a component image in:

@/public/components

Add Yourself as a Contributor

Don’t forget to add yourself to the contributors.tsx file:

@/data/contributors.tsx

Example entry:

{
  name: "Your Name",
  image: "https://avatars.githubusercontent.com/u/your-github-id?v=4",
  github: "https://github.com/YourUsername"
}

Submit Your Changes

After completing the above steps, commit and push your changes:

git add .
git commit -m "Added [your component name] component"
git push origin your-feature-branch

Create a Pull Request

Then, create a Pull Request (PR) to merge your branch into the main branch on GitHub.

FAQ

Some common questions you may encounter:

Learn More

To learn more about Kaif UI, take a look at the following resources:

Join the Community

Become a part of the Kaif UI community! Share your experiences, ask questions, and collaborate with other developers. Together, we can make kaif UI even better. Join Discord.

License

Kaif UI is licensed under the MIT License. You are free to use, modify, and distribute the library as you see fit. For more information, please refer to the LICENSE

Thank You

Thank you for choosing Kaif UI. We appreciate your support and look forward to seeing the amazing applications you build with our library.

Enjoy!

We hope you enjoy using Kaif UI to build your applications. Our goal is to provide you with a robust and flexible set of tools to create stunning user interfaces.

Kaif UI

Built with ❤️ by Muhammad Kaif Nazeer

Previous

Zoom Parallax

On this page

Logo

Kaif UI

Brought to you by Muhammad Kaif Nazeer
ComponentsBlocksTemplates
TwitterDiscord