├── .gitignore ├── CODE OF CONDUCT.md ├── CONTRIBUTION.md ├── LICENSE ├── README.md ├── app ├── alienx │ └── page.tsx ├── comp │ └── page.tsx ├── compdetails │ └── [page] │ │ └── page.tsx ├── globals.css ├── layout.tsx └── page.tsx ├── components ├── Banner.tsx ├── BannerAlienX.tsx ├── CompCard.tsx ├── Contributors.tsx ├── FaQ.tsx ├── Footer.tsx ├── Header.tsx ├── Hero.tsx ├── Inspiration.tsx ├── InstallVScodeExtension.tsx ├── LandingPageCompDisplayOne.tsx ├── LandingPageCompDisplayTwo.tsx ├── LandingpageAvatar.tsx ├── LandingpageBadge.tsx ├── LandingpageButton.tsx ├── LandingpageCheckbox.tsx ├── LandingpageModal.tsx ├── LandingpageProgressbar.tsx ├── LandingpageSpinner.tsx ├── LandingpageSwitch.tsx ├── Navbuttons.tsx ├── NewsLetter.tsx ├── Products.tsx ├── Searchbar.tsx ├── Suggestion.tsx ├── WhyUseAlienUIReact.tsx └── comp │ ├── Accordion │ └── GalaxyAccordion.tsx │ ├── Alert │ ├── GalaxyAlert.tsx │ └── KrytharWailAlert.tsx │ ├── Avatar │ ├── EarthAvatar.tsx │ └── GalaxyAvatar.tsx │ ├── Badge │ └── GalaxyBadge.tsx │ ├── BreadCrumbs │ ├── EarthBreadcrumb.tsx │ └── GalaxyBreadcrumb.tsx │ ├── Button │ ├── EarthButton.tsx │ └── GalaxyButton.tsx │ ├── Card │ ├── EarthCard.tsx │ ├── GalaxyCard.tsx │ ├── JupiterCard.tsx │ ├── MarsCard.tsx │ └── PlutoCard.tsx │ ├── Carousel │ └── GalaxyCarousel.tsx │ ├── Checkbox │ └── GalaxyCheckbox.tsx │ ├── Dropdown │ └── GalaxyDropdown.tsx │ ├── Form │ └── GalaxyForm.tsx │ ├── Hero │ └── GalaxyHero.tsx │ ├── Input │ ├── EarthInput.tsx │ ├── NebulonInput.tsx │ └── VortexInput.tsx │ ├── Modal │ └── GalaxyModal.tsx │ ├── Navbar │ ├── EarthNavbar.tsx │ └── GalaxyNavbar.tsx │ ├── Notification │ └── NebulaNotification.tsx │ ├── Pagination │ ├── GalaxyPagination.tsx │ └── MarsPagination.tsx │ ├── Popover │ └── GalaxyPopover.tsx │ ├── Progress Bar │ ├── EarthProgressBar.tsx │ ├── GalaxyProgressBar.tsx │ └── MarsProgressBar.tsx │ ├── Search Bar │ └── GalaxySearchBar.tsx │ ├── Spinner │ ├── EarthSpinner.tsx │ └── GalaxySpinner.tsx │ ├── Switch │ └── GalaxySwitch.tsx │ ├── Table │ └── GalaxyTable.tsx │ └── Toast │ ├── EarthToast.tsx │ └── GalaxyToast.tsx ├── eslint.config.mjs ├── firebaseConfig └── firebase.tsx ├── next.config.ts ├── package-lock.json ├── package.json ├── postcss.config.mjs ├── public ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── file.svg ├── globe.svg ├── icon │ ├── arrowcircle.svg │ ├── bell.svg │ ├── card.svg │ ├── circledollar.svg │ ├── contact.svg │ ├── copy.svg │ ├── dollar.svg │ ├── doublecircle.svg │ ├── download.svg │ ├── download1.svg │ ├── emoji.svg │ ├── export.svg │ ├── eye.svg │ ├── flag.svg │ ├── home.svg │ ├── house.svg │ ├── import.svg │ ├── pocket.svg │ ├── profile.svg │ ├── savings.svg │ └── wallet.svg ├── images │ ├── alien.jpg │ ├── alien1.avif │ ├── alien3.avif │ ├── alienx.png │ ├── anwurii.jpg │ ├── aui.png │ ├── aui1.svg │ ├── auir.jpg │ ├── auir.png │ ├── azeez.jpg │ ├── farid.jpg │ ├── flowbite1.png │ ├── francis.jpg │ ├── habeeb.jpg │ ├── headshot.jpg │ ├── hyperui.webp │ ├── ken.jpg │ ├── mayowa.jpeg │ ├── multix.png │ ├── native.png │ ├── shadcnui.png │ └── shedrach.jpg ├── next.svg ├── site.webmanifest ├── vercel.svg └── window.svg ├── tsconfig.json └── utils ├── comp.tsx ├── contributorsData.tsx ├── data.tsx └── icons.tsx /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /CODE OF CONDUCT.md: -------------------------------------------------------------------------------- 1 | # AlienUI React Code of Conduct 2 | 3 | ## Our Commitment 4 | 5 | At **AlienUI React**, we are committed to fostering a welcoming, inclusive, and respectful environment for everyone involved in our community. Whether you are a user, contributor, or maintainer, we aim to create a harassment-free experience for all individuals regardless of age, body size, disability, ethnicity, gender identity or expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual orientation. 6 | 7 | ## Our Standards 8 | 9 | Positive contributions to our community include, but are not limited to: 10 | 11 | - Using inclusive, respectful, and welcoming language. 12 | - Being considerate of differing perspectives and experiences. 13 | - Constructively accepting and offering feedback. 14 | - Prioritizing the well-being of the community over individual opinions or interests. 15 | - Demonstrating empathy and support for all community members. 16 | 17 | The following behaviors are considered unacceptable: 18 | 19 | - Using sexualized language, imagery, or making unwelcome advances. 20 | - Engaging in trolling, insulting remarks, or personal attacks. 21 | - Harassment, whether in public or private communications. 22 | - Publishing private information (such as addresses or personal contact details) without explicit permission. 23 | - Behaviors or comments that are discriminatory, derogatory, or unprofessional. 24 | 25 | ## Responsibilities of Maintainers 26 | 27 | Maintainers of **AlienUI React** are tasked with defining and upholding the standards of this Code of Conduct. Responsibilities include: 28 | 29 | - Responding promptly and fairly to issues or behavior that violates this Code of Conduct. 30 | - Taking appropriate corrective actions, including warning, editing, or removing contributions, or banning individuals whose actions harm the community. 31 | - Ensuring that decisions and actions are taken with respect and fairness. 32 | 33 | ## Scope 34 | 35 | This Code of Conduct applies in all official project spaces, including GitHub repositories, issue trackers, and communication channels. It also applies when representing the project in public spaces such as conferences, social media, or other venues. 36 | 37 | ## Reporting Issues 38 | 39 | Instances of unacceptable behavior can be reported by contacting the project team at [alienuiteam@gmail.com](mailto:alienuiteam@gmail.com). All reports will be reviewed with confidentiality and handled as appropriate to the circumstances. We are committed to providing a safe environment for everyone who reaches out. 40 | 41 | ## Enforcement 42 | 43 | Consequences for violating this Code of Conduct may include: 44 | 45 | - A warning about the behavior in question. 46 | - Temporary or permanent removal from project spaces. 47 | - Escalation to project leadership for further review. 48 | - Other actions deemed necessary to protect the community. 49 | 50 | Project maintainers who fail to uphold or enforce this Code of Conduct may face temporary or permanent removal from their roles. 51 | 52 | ## Attribution 53 | 54 | This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available at . 55 | 56 | For additional guidance, see the [Contributor Covenant FAQ](https://www.contributor-covenant.org/faq). 57 | -------------------------------------------------------------------------------- /CONTRIBUTION.md: -------------------------------------------------------------------------------- 1 | # Contributing to AlienUI React 2 | 3 | Thank you for considering contributing to **AlienUI React**! Your contributions play a vital role in building a cutting-edge, inclusive, and highly customizable UI component library. This guide outlines how to get started and ensures a seamless contribution process for everyone involved. 4 | 5 | ## Getting Started 6 | 7 | 1. **Fork the repository.** 8 | 2. **Clone your fork to your local machine:** 9 | 10 | - Clone your fork to your local machine using the following command (replace `` and `` 11 | with your GitHub username and the repository name): 12 | 13 | ```bash 14 | git clone https://github.com//.git 15 | ``` 16 | 17 | 3. **Add the Original Repository as a Remote:** 18 | 19 | - Change into the directory of your cloned repository: 20 | 21 | ```bash 22 | cd 23 | ``` 24 | 25 | - Add the original repository as a remote (this helps you fetch changes from the original repository): 26 | 27 | ```bash 28 | git remote add upstream https://github.com//.git 29 | ``` 30 | 31 | 4. **Create a Branch:** 32 | 33 | - Create a new branch for your contribution (replace `` with a meaningful name): 34 | 35 | ```bash 36 | git checkout -b 37 | ``` 38 | 39 | 5. **Make Changes :** 40 | - Pick a task or feature you'd like to work on. Check out the [Issues](https://github.com/khaymanii/AlienUI-React/issues) tab for open task. 41 | - Fix or build the task assigned to you on the `issues` tab, and then attach an image or recorded video to the Pull request (PR) of the UI you built. 42 | 6. **Committing Changes** 43 | 44 | ```bash 45 | git add . 46 | git commit -m "Add your descriptive commit message here" 47 | ``` 48 | 49 | 7. **Fetch and Rebase from Upstream:** 50 | 51 | - Before pushing your changes, fetch the latest changes from the original repository and rebase your branch: 52 | 53 | ```bash 54 | git fetch upstream 55 | git rebase upstream/main 56 | ``` 57 | 58 | - Resolve any merge conflicts if they occur. 59 | 60 | 8. **Push your changes to your fork:** 61 | 62 | - Push your changes to your fork on GitHub: 63 | 64 | ```bash 65 | git push origin 66 | ``` 67 | 68 | 9. **Open a Pull Request (PR):** 69 | - Visit your fork on GitHub and switch to the branch you just pushed. 70 | - Click on the "New Pull Request" button. 71 | - Provide a clear and descriptive title and rendered image or recorded video for your PR. 72 | - Explain the purpose of your changes in the PR description. 73 | 74 | ## Pull Request Guidelines 75 | 76 | - Ensure your code follows the project's coding standards. 77 | - Be responsive to feedback and make necessary adjustments. 78 | 79 | **N/B:** AlienUI React uses Firebase to manage the form database. Incase you encounter any error while configuring in your local machine, you can setup your own firebase project and populate you API KEY in your .env file. Just for testing purpose. 80 | 81 | ## Code of Conduct 82 | 83 | - Review and adhere to our [Code of Conduct](https://github.com/khaymanii/AlienUI-React/blob/main/CODE%20OF%20CONDUCT.md) during your contribution. 84 | 85 | ## Show Your Support 86 | 87 | If you love AlienUI React, consider giving the repository a ⭐ on GitHub! It motivates us to keep improving and building the component library. 88 | **How to give the repository a star:** 89 | 90 | - Navigate to the top of the AlienUI React repository. 91 | - Click on the "Star" button in the upper right corner of the page. 92 | 93 | Thank you for being a part of AlienUI React! 👽 94 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 AlienUI Team 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AlienUI React👽 2 | 3 | A lightweight open-source UI component library built on Tailwind CSS for React web apps. It leverages native tags for seamless integration and maintains zero to minimal dependencies, enabling high-performance, and stunning interfaces with ease. 4 | 5 | ![1000751970](https://github.com/user-attachments/assets/bbe896b6-a3d7-492b-9b41-8b731eb49c10) 6 | 7 | ## Features 8 | 9 | ### **1. Zero Dependencies** 10 | 11 | - No external dependencies required. 12 | - Fully functional with just React and **Tailwind CSS** installed. 13 | - Simplifies integration into any project. 14 | 15 | ### **2. Native Tags for Components** 16 | 17 | - Built entirely on native React components like `div`, `h1`, `span`, `p`, etc. 18 | - Ensures compatibility with all React environments. 19 | 20 | ### **3. Lightweight and Performant** 21 | 22 | - Minimal overhead for faster web app performance. 23 | - Ideal for MVPs, small-scale projects, or large web apps requiring lightweight components. 24 | 25 | ### **4. Customization-Friendly** 26 | 27 | - Provides fully customizable components. 28 | - Works seamlessly with styling libraries like **Tailwind CSS**. 29 | 30 | ### **5. Plug-and-Play** 31 | 32 | - No setup or configuration required. 33 | - Just import the components and start building. 34 | 35 | ### **6. Comprehensive Documentation** 36 | 37 | - Easy-to-follow documentation to help you get started quickly. 38 | - Includes usage examples, code snippets, and preview. 39 | 40 | ### **7. Ready-to-Use Component Variants** 41 | 42 | - Pre-designed components with multiple variants for buttons, inputs, and more. 43 | - Examples include: 44 | - **Galaxy and Earth Button** 45 | - **Nebulon and Earth Input** 46 | 47 | ### **8. Self-Hosted and Independent** 48 | 49 | - No reliance on third-party servers or APIs. 50 | - Gives developers full control over the library and its components. 51 | 52 | ## Components 53 | 54 | AlienUI React has a wide range of freely available components. These components include: 55 | 56 | - [Accordion](https://alienui-react.vercel.app/compdetails/Accordion) 57 | - [Alert](https://alienui-react.vercel.app/compdetails/Alert) 58 | - [Avatar](https://alienui-react.vercel.app/compdetails/Avatar) 59 | - [Badge](https://alienui-react.vercel.app/compdetails/Badge) 60 | - [Breadcrumb](https://alienui-react.vercel.app/compdetails/Breadcrumb) 61 | - [Button](https://alienui-react.vercel.app/compdetails/Button) 62 | - [Card](https://alienui-react.vercel.app/compdetails/Card) 63 | - [Carousel](https://alienui-react.vercel.app/compdetails/Carousel) 64 | - [Checkbox](https://alienui-react.vercel.app/compdetails/Checkbox) 65 | - [Dropdown](https://alienui-react.vercel.app/compdetails/Dropdown) 66 | - [Form](https://alienui-react.vercel.app/compdetails/Form) 67 | - [Input](https://alienui-react.vercel.app/compdetails/Input) 68 | - [Modal](https://alienui-react.vercel.app/compdetails/Modal) 69 | - [Notification](https://alienui-react.vercel.app/compdetails/Notification) 70 | - [Pagination](https://alienui-react.vercel.app/compdetails/Pagination) 71 | - [Popover](https://alienui-react.vercel.app/compdetails/Popover) 72 | - [Progress Bar](https://alienui-react.vercel.app/compdetails/Progress) 73 | - [Search Bar](https://alienui-react.vercel.app/compdetails/Search) 74 | - [Spinner](https://alienui-react.vercel.app/compdetails/Spinner) 75 | - [Switch](https://alienui-react.vercel.app/compdetails/Switch) 76 | - [Table](https://alienui-react.vercel.app/compdetails/Table) 77 | - [Toast](https://alienui-react.vercel.app/compdetails/Toast) 78 | 79 | ## Contributing 80 | 81 | Contributors can contribute by adding new components, fixing bugs or improving the documentation. Please create an issue before starting any work. Once you get approval on your issue, you can create a new branch and submit your changes in a PR. Please note that all PRs need to be reviewed. 82 | 83 | A detailed contribution guide is found in [CONTRIBUTION.md](https://github.com/khaymanii/AlienUI-React/blob/main/CONTRIBUTION.md) 84 | 85 | ## License 86 | 87 | AlienUI React is an open source project licensed under the [MIT LICENSE](https://github.com/khaymanii/AlienUI-React/blob/main/LICENSE) 88 | -------------------------------------------------------------------------------- /app/alienx/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Image from "next/image"; 3 | 4 | function page() { 5 | return ( 6 |
7 | {" "} 8 |
9 |
10 | AlienX Logo 17 |

AlienX

18 |

19 | AlienX is a powerful VS Code snippet extension that generates UI 20 | components for both web and React Native mobile apps in your VS Code 21 | environment. 22 |

23 |

24 | Enhance your development workflow with ready-to-use UI components 25 | built on Nativewind and Tailwind CSS, and also other UI libraries 26 | making your web and app development faster and more efficient. 27 |

28 | 34 | Get AlienX on VS Code Marketplace 35 | 36 |
37 |
38 |
39 | ); 40 | } 41 | 42 | export default page; 43 | -------------------------------------------------------------------------------- /app/comp/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState } from "react"; 3 | import CompCard from "@/components/CompCard"; 4 | import { components } from "@/utils/data"; 5 | import SearchBar from "@/components/Searchbar"; 6 | 7 | function Page() { 8 | const [searchQuery, setSearchQuery] = useState(""); 9 | 10 | const filteredComponents = Object.values(components).filter((comp) => 11 | comp.name.toLowerCase().includes(searchQuery.toLowerCase()) 12 | ); 13 | return ( 14 |
15 |
16 | {" "} 17 |

18 | Components 19 |

{" "} 20 |

21 | Explore a wide range of customizable and ready-to-use components 22 | designed specifically for building stunning and functional web apps. 23 | Each component is optimized for flexibility, ensuring seamless 24 | integration into your projects 25 |

26 |
27 | {" "} 28 | 29 |
30 |
31 |
32 |

33 | Ensure your web app is properly configured to use Tailwind CSS 34 | utility classes. Check the{" "} 35 | 39 | Tailwind CSS configuration guide 40 | 41 |

42 |
43 |
44 |
45 |
46 | {filteredComponents.length > 0 ? ( 47 | filteredComponents.map((comp) => ( 48 | 49 | )) 50 | ) : ( 51 |

52 | No components found. 53 |

54 | )} 55 |
56 |
57 | ); 58 | } 59 | 60 | export default Page; 61 | -------------------------------------------------------------------------------- /app/compdetails/[page]/page.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | "use client"; 3 | import React, { useState } from "react"; 4 | import { useParams } from "next/navigation"; 5 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; 6 | import { duotoneLight } from "react-syntax-highlighter/dist/esm/styles/prism"; 7 | import { BsClipboard2Heart } from "react-icons/bs"; 8 | import { components } from "@/utils/data"; 9 | import Navbuttons from "@/components/Navbuttons"; 10 | 11 | const Page = () => { 12 | const params = useParams(); 13 | const id = params.page; 14 | 15 | const componentIndex = Object.values(components).findIndex( 16 | (comp) => comp.name === id 17 | ); 18 | const component = Object.values(components)[componentIndex]; 19 | 20 | if (!component) { 21 | return ( 22 |
23 | Component not found! 24 |
25 | ); 26 | } 27 | 28 | return ( 29 |
30 | 31 | 32 |
33 |

34 | {component.name} 35 |

36 |

37 | {component.description} 38 |

39 |
40 | 41 | {component.variants.map((variant, index) => ( 42 | 43 | ))} 44 | 45 |
46 | ); 47 | }; 48 | 49 | const VariantBlock = ({ variant }: { variant: any }) => { 50 | const [copied, setCopied] = useState(false); 51 | 52 | const handleCopy = () => { 53 | navigator.clipboard.writeText(variant.code); 54 | setCopied(true); 55 | setTimeout(() => setCopied(false), 2000); 56 | }; 57 | 58 | return ( 59 |
60 |

{variant.name}

61 |

{variant.description}

62 | 63 |
64 |

Preview

65 |
66 | {variant.render} 67 |
68 |
69 | 70 |
71 | 76 | {variant.code} 77 | 78 | 82 | {copied && ( 83 | 84 | Copied! 85 | 86 | )} 87 |
88 | 89 |
90 |

Usage Example

91 |
92 | 97 | {variant.code1} 98 | 99 |
100 |
101 |
102 | ); 103 | }; 104 | 105 | export default Page; 106 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | :root { 4 | font-family: var(--font-montserrat), sans-serif; 5 | } 6 | 7 | body { 8 | font-family: var(--font-montserrat), sans-serif; 9 | line-height: 1.5; 10 | } 11 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Montserrat } from "next/font/google"; 3 | import "./globals.css"; 4 | import Header from "@/components/Header"; 5 | import Footer from "@/components/Footer"; 6 | import Banner from "@/components/Banner"; 7 | import BannerAlienX from "@/components/BannerAlienX"; 8 | 9 | const montserrat = Montserrat({ 10 | variable: "--font-montserrat", 11 | subsets: ["latin"], 12 | weight: ["400", "500", "600", "700"], 13 | display: "swap", 14 | }); 15 | 16 | export const metadata: Metadata = { 17 | title: "AlienUI React", 18 | description: "Prebuilt Tailwind CSS UI Components", 19 | keywords: "UI, Tailwind CSS, components, react, AlienUI react", 20 | authors: [{ name: "Kenneth Akpo" }], 21 | }; 22 | 23 | export default function RootLayout({ 24 | children, 25 | }: Readonly<{ 26 | children: React.ReactNode; 27 | }>) { 28 | return ( 29 | 30 | 31 | 36 | 42 | 48 | 49 | 50 | 51 | 52 |
53 | 54 | {children} 55 |