AlienX is a powerful VS Code snippet extension crafted by the AlienUI team, designed to speed up your web and app development with ready-to-use UI components and utility snippets.
1000653033.mov
- 🧩 Multi-Framework Support – Generate UI snippets for Alien UI, Shadcn UI, and Chakra UI in one extension.
- ⚡ Pre-built UI Components – Instantly add Button, Card, Input, Popover, Table, and more across supported libraries.
- 🔄 Web & Mobile Ready – Snippets for both web and mobile (React Native) components.
- 🎨 Multiple Styling Variants – Easily switch between themes like galaxy, earth, and mars (for AlienUI) or predefined styles from other UI libraries.
- 🛠️ Flexible & Customizable – Modify generated snippets to match your project’s design system effortlessly.
- ⏳ Save Time & Reduce Boilerplate – Generate full component structures in seconds for rapid development.
- 🎛 Component Selector – Choose from Alien UI, Shadcn UI, or Chakra UI.
- Open VS Code.
- Go to Extensions (or press
Ctrl+Shift+X). - Search for AlienX.
- Click Install.
- Reload VS Code if necessary.
Before usage, make sure you've read documentation for the supported UI libraries to see the available component and their variants. Check:
- AlienUI for AlienUI documentation.
- ShadcnUI for ShadcnUI documentation.
- ChakraUI for ChakraUI documentation.
Create a .tsx or .jsx file in your project folder and Simply type the prefix for the UI snippet you need, and let AlienX do the rest!
The table below shows the available components and their respective prefix.
Note: For AlienUI component library, All components have both Javascript and Typescript support but Some reusable components have a seperate Javascript and Typescript(tsx) version such as (Accordion, Alert, Button, Dropdown) for better type safety.
| Component | Prefix (AlienUI react web) | Prefix (AlienUI react native app) | Prefix ShadcnUI | Prefix ChakraUI |
|---|---|---|---|---|
Accordion |
accordion-web | accordion-app | shad-accordion | chak-accordion |
Alert |
alert-web | alert-app | shad-alert | chak-alert |
Avatar |
avatar-web | avatar-app | shad-avatar | chak-avatar |
Badge |
badge-web | badge-app | shad-badge | chak-badge |
BreadCrumbs |
breadcrumb-web | breadcrumb-app | shad-breadcrumb | chak-breadcrumb |
Button |
button-web | button-app | shad-btn | chak-btn |
Card |
card-web | card-app | shad-card | chak-card |
Carousel |
carousel-web | carousel-app | shad-carousel | |
Checkbox |
checkbox-web | checkbox-app | shad-checkbox | chak-checkbox |
Dropdown |
dropdown-web | dropdown-app | shad-dropdown | chak-dropdown |
Input |
input-web | input-app | shad-input | chak-input |
Modal |
modal-web | modal-app | ||
Navbar |
nav-web | |||
Notification |
notification-web | notification-app | ||
Pagination |
pagination-web | pagination-app | shad-pagination | chak-pagination |
Popover |
popover-web | popover-app | shad-popover | chak-popover |
Progress Bar |
progress-web | progress-app | shad-progress | chak-progress |
Search Bar |
search-web | search-app | ||
Spinner |
spinner-web | spinner-app | chak-spinner | |
Switch |
switch-web | switch-app | shad-switch | chak-switch |
Tab |
tab-app | shad-tab | chak-tab | |
Table |
table-web | table-app | shad-table | chak-table |
Toast |
toast-web | toast-app |
- JavaScript and TypeScript
- React, Nextjs and React Native etc.
- Works seamlessly across any project that uses
.jsx,.tsx,.js, or.ts.
We welcome contributions from the community!
- Report bugs or suggest features via GitHub Issues.
This project is licensed under the MIT License – free to use and modify.
What's New?
The latest AlienX 1.0.2 update brings enhanced support for both web and app, along with seamless integration for popular UI libraries!
- New Features & Improvements
- Expanded Snippet Support – Generate UI components effortlessly for React & React Native projects.
- Multiple Component Variants – Easily switch between variants for Button, Card, Input, Modal, and more.
- Seamless File Compatibility – Works with .js, .jsx, .ts, and .tsx files out of the box.
- Customizable & Efficient – Modify snippets to fit your project’s style with ease.
- New UI Library Integrations – Now supports ShadCN, Chakra UI, and Radix UI components alongside AlienUI.
This update makes AlienX more flexible, powerful, and adaptable for a wide range of UI needs.
AlienUI Team is a modern design and development team focused on creating developer-friendly tools and UI libraries.
Follow us on Website | Twitter | Linkedin | GitHub.
Developed with ❤️ by the AlienUI Team