KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #codex #developer-tools #ai-agents #react #cli #claude-code #ios #open-source #ai-agent #mcp #desktop-app

tailwind_ui_components

★ 76 Open GitHub ↗

An open-source website made for Tailwind CSS UI components. Here we can find almost all UI components made with tailwind CSS which can be used in different languages.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# TailwindCSS UI Component

This is the right place to play around with UI components build under TailwindCSS

[![Repo view count from Oct-27th 9PM](https://hits.dwyl.com/jsvigneshkanna/tailwind_ui_components.svg)](http://hits.dwyl.com/jsvigneshkanna/tailwind_ui_components)

## Repo's Traffic since October 14th 2022🚀🚀🚀
 ![image](https://user-images.githubusercontent.com/42484705/198340953-94338bdb-0313-40ca-bfae-e4701f79e048.png)

[![GitHub issues](https://img.shields.io/github/issues/jsvigneshkanna/tailwind_ui_components?logo=github)](https://github.com/jsvigneshkanna/tailwind_ui_components/issues) [![GitHub forks](https://img.shields.io/github/forks/jsvigneshkanna/tailwind_ui_components?logo=github)](https://github.com/jsvigneshkanna/tailwind_ui_components/network/members) [![GitHub stars](https://img.shields.io/github/stars/jsvigneshkanna/tailwind_ui_components?logo=github)](https://github.com/jsvigneshkanna/tailwind_ui_components/stargazers)

</div>

---

**Homepage**
![image](https://user-images.githubusercontent.com/42484705/197696692-560c05b1-5207-41c7-adc9-d10fe403ece2.png)

**Components selection page**
![image](https://user-images.githubusercontent.com/42484705/197696771-9aaf4f6d-1928-4d66-9d2b-01ad479d289a.png)

**Codepen page**
![image](https://user-images.githubusercontent.com/42484705/197697009-132c44c8-29b3-40f7-98d0-c54f0aa8a33b.png)

---

# Motivation

We do know tailwind css is an emerging CSS framework which makes our website/ app unique without styling compared to other market bootstraps
Yeah? but there is still a hindrance to start with tailwind CSS as it is somewhat complex to other competitors and we don't have enough
free resources to learn or play with these utility based classes.

# Solution

If you are searching for an answer for above question/ rant, then this website is best suitable for you all. Here we can get almost all layouts and components built under Tailwind CSS, and the best part is we can play around with them in inbuilt code editor and copy the codebase too for your projects.

# Like to contribute to us by code/ design?

Please follow the [contributing guide](./CONTRIBUTING.md) for this repo. Anything that is not followed will not be entertained as contribution.

# Like to contribute us by money?

This contribution is not forced but welcomed, as this will help us run this software for long time
<p align="center">
<a href = "https://www.buymeacoffee.com/jsvigneshkanna?new=1"><img src ="https://cdn.buymeacoffee.com/buttons/default-red.png" height="30"/></a>
</p>

# Getting started to contribute/use
<div align="center">

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/jsvigneshkanna/tailwind_ui_components.git)

1. Fork the repository from [Repository](https://github.com/jsvigneshkanna/tailwind_ui_components). Just click at `fork` icon to create a fork-repository in your GitHub. In your local machine clone the forked repository with command and go to your repository
    ``` sh
     git clone https://github.com/<username>/tailwind_ui_components.git
     cd tailwind_ui_components
    ```
 2. After you choose the issue create new branch. (Use issue specifying either documentation, bug or feature than issue number and what should be done) 
    ```sh
    git checkout -b <branch_name> 
    ```
 3. Install dependencies
    ```
    npm install
    ```
 4. Run code locally
    ```
    npm run dev
    ```
 5. Go to `localhost:3000`
 6. Make the changes in code and test these. (NextJS and tailwind/plain CSS)
 7. After changes are ready, commit the changes:
    ``` sh
    git add <changed_file> 
    git commit -m "commit message"
    ```
 8. Push the changes to origin
    ``` sh
    git push origin <branch_name>
    ```
 9. After that create new Pull Request in your GitHub account. (It should appear after commits were pushed)

# Contributors 🎉

These people are sole backbone for this software. Want to get place in below hall of fame? join our community

<br>
<div align="center">
   Show some ❤️ by starring this awesome repository!
</div>

tailwind_ui_components

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README