
Atomox is a collaborative platform where developers and designers can share, explore, and give feedback on reusable web components. Built for the Clerk x Midudev hackathon, Atomox makes it easy to get feedback and inspire others with your UI creations.
Table of contents
Atomox is a collaborative platform where developers and designers can share, explore, and give feedback on reusable web components. Whether you're looking to discover creative UI ideas, contribute your own components, or get constructive feedback from the community, Atomox is your playground for modern, component-based web design.
![]() |
![]() |
![]() |
![]() |
List of the frameworks, libraries and tools used to build this project.
- Clerk For authentication
- Next.js
- Supabase For database & storage
- React.js
- shadcn/ui For the design system
- React Monaco Editor For the code editor
- Lucide For icons
- Vercel For hosting
- Tailwind CSS For styling
- Figma For layouts and design
- Canvas confetti For the confetti animation
- React Hook Form For form validation
- Zod For form validation
- next-themes For dark mode
- Clone or fork the repo
git clone https://github.com/cosmoart/atomox
- Install NPM packages
npm install
- Run the project
npm run dev
Proposed features that may or may not be implemented in the future.
- Comments section
- User achievements, description & links.
- Components from other frameworks (React, Vue, Angular, etc.)
- Tailwind autocomplete
- Verified user role
(Its components are published immediately.) - Licenses or credits for the components
- Zoom in/out in components
Distributed under the Apache License 2.0. See LICENSE.txt
for more information.
- My website - cosmoart.dev
- Twitter - @cosmoart0
- Instagram - @cosmoart0