KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

Beautiify

★ 222 Open GitHub ↗

Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# <p align="center">✨Beautiify✨</p>

<div align="center">
<p>

[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
[![Netlify Status](https://api.netlify.com/api/v1/badges/8d5cd3ed-52d0-4619-bc27-3dcc46f8a0fa/deploy-status)](https://app.netlify.com/sites/beautiify/deploys)
![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)
![Visitors](https://api.visitorbadge.io/api/visitors?path=Rakesh9100%2FBeautiify%20&countColor=%23263759&style=flat)
![GitHub forks](https://img.shields.io/github/forks/Rakesh9100/Beautiify)
![GitHub Repo stars](https://img.shields.io/github/stars/Rakesh9100/Beautiify)
![GitHub contributors](https://img.shields.io/github/contributors/Rakesh9100/Beautiify)
![GitHub last commit](https://img.shields.io/github/last-commit/Rakesh9100/Beautiify)
![GitHub repo size](https://img.shields.io/github/repo-size/Rakesh9100/Beautiify)
![Github](https://img.shields.io/github/license/Rakesh9100/Beautiify)
![GitHub issues](https://img.shields.io/github/issues/Rakesh9100/Beautiify)
![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/Rakesh9100/Beautiify)
![GitHub pull requests](https://img.shields.io/github/issues-pr/Rakesh9100/Beautiify)
![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed/Rakesh9100/Beautiify)
</p>
</div>

<h2>Table of Contents🧾</h2>

- [Introduction📌](#introduction)
- [Technology Used🚀](#technology-used)
- [Overview⭐](#overview)
- [Getting Started💥](#getting-started)
- [Contributing Guidelines📑](#contributing-guidelines)
- [Code Of Conduct📑](#code-of-conduct)
- [Open Source Programs🥳](#this-repo-has-been-part-of-the-following-open-source-programs)
- [Project Admin⚡](#project-admin)
- [Project Contributors🫂](#project-contributors)
- [Contributing is fun🧡](#contributing-is-fun)
<br>

<h2>Introduction📌</h2>

Beautiify is a comprehensive collection of meticulously crafted components and animations designed to enhance the aesthetic appeal and user experience of any website. Whether you are building a simple landing page or a complex web application, Beautiify provides you with the tools to create visually stunning and highly interactive user interfaces.

<h3>Features💡</h3>
Beautiify offers a diverse range of components and animations designed to enhance the user interface of any website. Each component is available in multiple designs, providing ample customization options.

<h3>Components🎨</h3>

1. **Accordions** ➡️ Accordions are expandable sections that reveal or hide content when clicked. Beautiify offers various styles, including 3D Accordion, Glassmorphism Accordion, Horizontal Picture Accordion, and so on.

2. **Backgrounds** ➡️ Beautiify includes a collection of visually appealing backgrounds to enhance the look of your site. Options include 3D Boxes Background, Abstract Background, Animated Colorful Background, and so on.

3. **Breadcrumbs** ➡️ Breadcrumbs provide navigational links to enhance user experience. Available designs include 3D Breadcrumb, Animated Breadcrumb, Gaming Breadcrumb, and so on.

4. **Buttons** ➡️ Stylish and functional buttons are available in different shapes and sizes. Designs include Blob Button, Glow Button, Hover Button, and so on.

5. **Cards** ➡️ Cards are versatile containers for displaying content. Beautiify provides various card designs, such as 3D Animated Card, Blog Post Card, Flip Card, and so on.

6. **Carousels** ➡️ Carousels are rotating sliders for showcasing images or content. Available types include 3D Image Carousel, Draggable Carousel, Neumorphism Carousel, and so on.

7. **Cursors** ➡️ Cursors are customizable mouse pointers that enhance interactivity and user experience. Beautiify offers designs like Dot Cursor, Pulsating Cursor, and so on.

8. **Dropdowns** ➡️ Dropdowns allow users to select options from a list. Beautiify offers several styles which include Apple Themed Dropdown, The More Menu Dropdown, and so on.

9. **Error Pages** ➡️ Error Pages are displayed when a user encounters an issue, such as a broken link or missing page. Beautiify provides creative designs like 404 Error Page, Neon Glow Error Page, and so on.

10. **Footers** ➡️ Footers are customizable sections at the bottom of pages. Beautiify includes Animated Footer, Classic Footer, Waves Footer, and so on.

11. **Forms** ➡️ Forms are essential for user input. Beautiify provides a range of form designs, including Animated Login Form, Black Red Signup Form, Contact Form, and so on.

12. **Heroes** ➡️ Heroes are a large, attention-grabbing picture with text typically shown in the above-the-fold area. Beautiify provides various hero designs such as Carousel Hero, Collage-Style Hero, and so on.

13. **Loaders** ➡️ Loaders indicate the loading process. Beautiify features various loader designs such as Bird Loader, Clock Loader, Helix Loader, and so on.

14. **Navigation Bars** ➡️ Navigation Bars provide links for site navigation. Beautiify offers Circular Navigation Bar, Hamburger Navigation Bar, Overlay Navigation Bar, and so on.

15. **Popups** ➡️ Popups display messages or content overlays. Available designs include Context Menu Popup, Error Notification Popup, Success Notification Popup, and so on.

16. **Scrollbars** ➡️ Scrollbars are customizable elements that allow users to navigate through content. Beautiify offers designs like Elegant Custom Scrollbar, Rainbow Scrollbar, and so on.

17. **Search Bars** ➡️ Search Bars enable users to search content on your site. Beautiify provides 3D Search Bar, Google Search Bar, Neumorphism Search Bar, and so on.

18. **Tables** ➡️ Tables are used to organize and display data in rows and columns. Beautiify offers designs like Bending Sheet Table, Pop Up Table, and so on.

19. **Text Animations** ➡️ Text Animations add dynamic effects to text. Beautiify includes Flip Text Animation, Fog Text Animation, Glowing Text Animation, and so on.

20. **Toggle Switches** ➡️ Toggle switches prompt users to choose between two mutually exclusive options and always have a default value. Available designs are Robo Toggle Switch, Light Toggle Switch, and so on.

21. **Tooltips** ➡️ A tooltip is a brief, informative message that appears when a user interacts with an element. Beautiify provides various designs like Animated Tooltip, Shopping Cart Tooltip, and so on.

22. **Transfer Lists** ➡️ Transfer Lists allow items to be moved between lists. Available styles are Card Based Transfer List, Neumorphism Transfer List, and so on.

<h2>Technology Used🚀</h2>

<h2>Overview⭐</h2>

<h3>Live Project --> (https://beautiify.netlify.app)</h3>

![image](https://github.com/user-attachments/assets/ab684423-7264-482b-9a66-b6a0b3843ac3)<br><br>
<h3>About Page :-</h3>

![image](https://github.com/user-attachments/assets/97842915-39a8-4c4d-a965-ed82ef7677ac)<br><br>
<h3>Components Page :-</h3>

![image](https://github.com/user-attachments/assets/6894f539-afbe-4830-9ff8-a7cc5ea4d5b0)<br><br>
<h3>Contributors Page :-</h3>

![image](https://github.com/user-attachments/assets/d06e0a8f-5c97-4b6c-ac5f-3a17972ff020)<br><br>
<h3>FAQ Page :-</h3>

![image](https://github.com/user-attachments/assets/525cdac6-ac6c-44ab-9fb8-82dc369a04b0)<br><br>
<h3>Contact Page :-</h3>

![image](https://github.com/user-attachments/assets/bdd4c938-394d-468a-82a9-143d67cfc6b8)<br><br>
<h3>Footer :-</h3>

![image](https://github.com/user-attachments/assets/569b271a-0899-4939-bf1f-1b8c74f07073)
<br><br>
<p align="right">(<a href="#top">back to top</a>)</p>

<h2>Getting Started💥</h2>

- Fork this Repository.
- Clone the forked repository in your local system.
```
git clone https://github.com/<your-github-username>/Beautiify.git
```
- Open `index.html` in your browser.
- View the [Live Project](https://beautiify.netlify.app/) here.
- Raise an issue if you find a bug or add a feature.
- Wait for the issue to be assigned and proceed only after the issue is assigned to you.
- Navigate to the project directory.
```
cd Beautiify
```
- Create a new branch for your feature.
```
git checkout -b <your_branch_name>
```
- Perfom your desired changes to the code base.
- Track and stage your changes.
```
# Track the changes
git status

# Add changes to Index
git add .
```
- Commit your changes.
```
git commit -m "your_commit_message"
```
- Push your committed changes to the remote repo.
```
git push origin <your_branch_name>
```
- Go to your forked repository on GitHub and click on `Compare & pull request`.
- Add an appropriate title and description to your pull request explaining your changes and efforts done.
- Click on `Create pull request`.
- Congrats! 🥳 You've made your first pull request to this project repo.
- Wait for your pull request to be reviewed and if required suggestions would be provided to improve it.
- Celebrate 🥳 your success after your pull request is merged successfully.
<p align="right">(<a href="#top">back to top</a>)</p>

<h2>Contributing Guidelines📑</h2>

Read our [Contributing Guidelines](https://github.com/Rakesh9100/Beautiify/blob/main/.github/CONTRIBUTING_GUIDELINES.md) to learn about our development process, how to propose bugfixes and improvements, and how to build to Beautiify.

<h2>Code Of Conduct📑</h2>

This project and everyone participating in it is governed by the [Code of Conduct](https://github.com/Rakesh9100/Beautiify/blob/main/.github/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.

<h2>This repo has been part of the following Open Source Programs🥳</h2>

<table>

<tr>
<td align="center">
<a href="https://kwoc.kossiitkgp.org/"><img src="https://github.com/user-attachments/assets/cb303f6e-e912-4618-9f5b-7f36c1b8b3a6" height="140px" width="140px" alt="KWOC2024"></a><br><sub><b>KWOC 2k24</b></sub>
</td>
<td align="center">
<a href="https://gssoc.girlscript.tech/"><img src="https://github.com/Rakesh9100/CalcDiverse/assets/73993775/910a2a16-0906-4234-bc7f-90f65b259527" height="140px" width="140px" alt="GSSOC2024"></a><br><sub><b>GSSOC 2k24</b></sub>
</td>
<td align="center">
<a href="https://iwoc.codes/"><img src="https://github.com/Rakesh9100/Beautiify/assets/73993775/8ed95409-8fe5-42f5-b60c-51dc9f995df5" height="140px" width="140px" alt="IWOC2024"></a><br><sub><b>IWOC 2k24</b></sub>
</td>
<td align="center">
<a href="https://www.jwoc.tech/"><img src="https://github.com/Rakesh9100/Beautiify/assets/73993775/2a0fcf59-de20-4175-b8bb-67dbc17f3d40" height="140px" width="150px" alt="JWOC2024"></a><br><sub><b>JWOC 2k24</b></sub>
</td>
<td align="center">
<a href="https://www.socialwinterofcode.com/"><img src="https://github.com/Rakesh9100/Beautiify/assets/73993775/9235952f-9062-4352-992d-eb34e4d60283" height="140px" width="180px" alt="SWOC2024"></a><br><sub><b>SWOC 2k24</b></sub>
</td>
</tr>

</table>
<p align="right">(<a href="#top">back to top</a>)</p>

<h2>Project Admin⚡</h2>

<table>
<tr>
<td align="center">
<a href="https://github.com/Rakesh9100/"><img src="https://avatars.githubusercontent.com/u/73993775?v=4" height="140px" width="140px" alt="Rakesh Roshan"></a><br><sub><b>Rakesh Roshan</b><br><a href="https://www.linkedin.com/in/rakesh-roshan-9100/"><img src="https://github-production-user-asset-6210df.s3.amazonaws.com/73993775/278833250-adb040ea-e3ef-446e-bcd4-3e8d7d4c0176.png" width="45px" height="45px"></a></sub>
</td>
</tr>
</table>

<h2>Project Contributors🫂</h2>

<h2>Contributing is fun🧡</h2>

[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
<h3>Contributions of any kind from anyone are always welcome🌟!!</h3>
<h3>Give it a 🌟 if you ❤ this project. Happy Coding👨‍💻</h3>
<p align="right">(<a href="#top">back to top</a>)</p>

Beautiify

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README