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.
- Multi-Framework Support – Generate UI snippets for Alien UI, AlienUI React, Material UI, Daisy 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 and AlienUI-React) 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, Alien UI React, Material UI, or Daisy 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 React Native documentation.
- AlienUI-React for AlienUI React documentation.
- MaterialUI for MaterialUI documentation.
- DaisyUI for DaisyUI 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 & AlienUI-React 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) | Prefix (AlienUI React Native) | Prefix MaterialUI | Prefix DaisyUI |
|---|---|---|---|---|
Accordion |
accordion-web | accordion-app | mui-accordion | dai-accordion |
Alert |
alert-web | alert-app | mui-alert | dai-alert |
Avatar |
avatar-web | avatar-app | mui-avatar | dai-avatar |
Badge |
badge-web | badge-app | mui-badge | dai-badge |
BreadCrumbs |
breadcrumb-web | breadcrumb-app | mui-breadcrumb | dai-breadcrumb |
Button |
button-web | button-app | mui-btn | dai-btn |
Card |
card-web | card-app | mui-card | dai-card |
Carousel |
carousel-web | carousel-app | dai-carousel | |
Checkbox |
checkbox-web | checkbox-app | mui-checkbox | dai-checkbox |
Dropdown |
dropdown-web | dropdown-app | mui-dropdown | dai-dropdown |
Input |
input-web | input-app | mui-input | dai-input |
Modal |
modal-web | modal-app | mui-modal | dai-modal |
Navbar |
nav-web | dai-nav | ||
Notification |
notification-web | notification-app | ||
Pagination |
pagination-web | pagination-app | mui-pagination | dai-pagination |
Popover |
popover-web | popover-app | mui-popover | |
Progress Bar |
progress-web | progress-app | mui-progress | dai-progress |
Search Bar |
search-web | search-app | ||
Spinner |
spinner-web | spinner-app | mui-spinner | dai-spinner |
Switch |
switch-web | switch-app | mui-switch | dai-switch |
Tab |
tab-app | mui-tab | dai-tab | |
Table |
table-web | table-app | mui-table | dai-table |
Toast |
toast-web | toast-app | dai-toast |
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.
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
