Subscribe
Sign in
21st.dev - The NPM for Design Engineers
p/21st-dev-the-npm-for-design-engineersMarketplace for Ready-to-Use and Customizable UI Components
Start new thread
Rohan Chaubey

21st.dev - Github + Pinterest to make your AI websites look beautiful

by•

Make your AI websites look professional & beautiful. Copy-paste UI into v0, Cursor, Bolt, Lovable, Replit from the largest marketplace of UI elements. Get inspired by 50+ pro design engineers. Publish your design engineering work

Add a comment

Replies

Best
Serafim
Maker
How I came up with an idea of Figma Community for code? I remembered a time when I was just vibing on the high of creating things from scratch. That month, I was deep into the frontend and stumbled into the “design engineering” side of Twitter—where people share insane snippets and tools. That’s how I found @mbarvian's Motion Number. Using it felt incredible, like bringing a long-time dream to life. I’d wanted animations like that ever since seeing the obsessive craft behind Family wallet’s UI. It hit me: there’s so much gold on Twitter, but unless you spend hours scrolling, you’ll never see it. I really wanted to share those. I was working on Telegram mini-apps at the time, and a question popped up: why should everyone rebuild Telegram UI Library from scratch? Mini-apps were blowing up, and so many devs were working on them. I even made a mini-app boilerplate, but it still didn’t feel like enough. Then two final moments solidified the idea: 1. I discovered and was thrilled. On dev Twitter, it’s standard, but for most non telegram-native devs, finding it is like uncovering a hidden gem. That knowledge gap felt so unfair. 2. I built a floating toolbar (Amie calendar vibes that used @shadcn combobox). It was so useful, I needed to share it. That’s when it clicked: there’s no dedicated space for frontend devs—or design engineers devs in general—to share what they’ve built. So I started 21st. I learned backend and database setup from scratch. No expectations—just the pure joy of building, learning, and putting everything I loved into one place. Today, http://21st.dev is the largest community of designers who code shadcn/ui-like components, with thousands of daily users who use them in AI apps like v0, Lovable, bolt.new, Cursor or Replit. I am so proud to have started it.
Shao
@mbarvian @serafimcloud @igorkotua congrats on the launch! I have wished for this but for swift and Apple especially recently as I was working on my mac app. As I also often see these video demos of one bite sized components on X.com and kept bookmarking them.... Software is all about collaboration and build on top of other's work, thanks for making that easier for everyone!
Serafim
Maker
@randomor Thank you, Shaomeng! Collaboration and building on others’ work is at the heart of what we’re trying to do with 21st.dev. Your idea of something similar for Swift and Apple components is really interesting—it’s inspiring to think about how this concept can extend to other ecosystems. Appreciate the kind words and your support!
MD ALLMAMUN Ridoy
@mbarvian @shadcn @serafimcloud You can add optimized prompt for Websparks.AI Software Engineer Agent.
Spiral Mantra

@mbarvian @shadcn @serafimcloud Thank you! Collaboration and innovation are central to our mission at 21st.dev. Your idea of creating something similar for Swift and Apple components is truly fascinating—it’s exciting to explore how this concept can expand to other ecosystems. We appreciate your thoughtful input and support!

Eskov Vitaly
@serafimcloud 21st.dev already looks quite mature. I really liked it, use it often, this is what we need for fullstack development today. Ready-made prompts for various platform are very useful. I miss a page with all your new components, in my opinion, it would motivate users (and me) to use 21st.dev every day. Do you have something like this in your roadmap? How do you see the monetization of the product?
Serafim
Maker
@esvitaly Thank you for the kind words, Vitaly! A page showcasing all the components is a fantastic idea—we’re already exploring how to make discovery and browsing even easier for users. It’s definitely on the roadmap! Regarding monetization, we’re focused on providing value first, but we’re developing marketplace now. Are there specific features you’d like to see on such a page?
Eskov Vitaly
@serafimcloud I'm sure you'll succeed! I don't think anything specific is required. The main thing is that it should be easy for user to stay up to date with the latest component updates.
Daniel Dhawan
Maker
@serafimcloud @esvitaly actually you can already discover latest components by sorting by "newest". But we will definitely make it easier
Angus Mac
This is a great product, I really love a good UI elements when developing projects ,and I think this helps a lot of engineers as well as designers.
Serafim
Maker
@angus_mac Thank you, Angus! It’s great to hear that you see the value for both engineers and designers. Is there a specific type of component or feature you find most helpful when working on your projects? We’re always looking to improve and expand the library based on feedback!
Nika
I know with what I will be playing the next couple of months :D
Serafim
Maker
@busmark_w_nika That’s amazing to hear! What kind of projects are you planning to use it for? Is there a specific component or feature you’re most excited to try out?
Nika
@serafimcloud Now, I am trying to create a directory but soon would like to create a personal website :) Probably some colourful components, because I really like linear animations :D
Serafim
Maker
@busmark_w_nika “That sounds like a great plan, Nika! Colorful components and linear animations can really make a personal website stand out. Let me know if you need help finding the right components or customizing them for your style—I’d love to see what you create!
William Scott
This is such an inspiring journey, and it’s amazing to see how you turned your passion for creating into something that benefits so many devs! 🎉 The gap you noticed—between discovering design-engineering gems on Twitter and actually having a dedicated space to share them—resonates so much. It’s a problem many of us face but don’t actively think to solve. Quick question: Do I need to install all npm packages when using your service?
Serafim
Maker
@williamrobertscott Thank you so much, William! That means a lot. Bridging the gap between discovering design-engineering gems and making them accessible has been a big motivation behind 21st.dev. Are there any particular challenges or gaps you think we should focus on solving next? Your input would be incredibly valuable!
Khusboo ↗️
Wow , Amazing Product for Professional and Beautiful websites . Congratulations for your product launch @daniel_dhawan @serafimcloud
Serafim
Maker
@khusboo_tayal thank you 🙏🏻
Julia Zakharova
Launching soon!
@serafimcloud @igorkotua Hi, Team 21st.dev! 🎉 Congrats on your launch on Product Hunt! 🚀 I’m quickly sharing the link in our chat with frontend developers and tech leads. I love it! 😊
Serafim
Maker
@julia_zakharova2 thank you 🙏🏻
Iurii Dorofeev
Wow, this is an amazing tool for quickly kickstarting a new project! Have you considered adding integrations with popular IDEs? It would make the workflow even smoother and more accessible for developers working in their preferred environments
Serafim
Maker
@iurii_dorofeev Thanks for the feedback! Integration with IDEs is a great point and definitely something we’re planning. Right now, we’ve already optimized for AI code editors like Lovable.dev, bolt.new, and Vercel v0. We’re building CLI for sync components with our library. Is there a specific IDE you use often where this would make the most impact for you?
Serafim
Maker
@iurii_dorofeev No judgment at all, Iurii! In fact, we’re working on a CLI and possibly an extension that will allow you to sync, install, and remove components easily—making it seamless to integrate with tools like JetBrains products. Stay tuned, it’s coming soon!
Anna N
Love it! It's always a pain when you don't have the opportunity to hire a designer for a pet project. Do you think this could become something big? I mean, how large is the market?
Serafim
Maker
@a_6 Thank you! That was one of the key ideas—to make it easy for developers to build great UIs without needing a designer. I hope it can become a GitHub for UI components and become big. Regarding the market, there’s a huge demand for ready-to-use components in the Tailwind ecosystem, especially ones that are highly customizable. What else do you think could make this tool even more useful for you?
Serafim
Maker
@a_6 We’re publishing new components every day, and design engineers are also contributing through a self-serve ‘Publish Component’ feature. The library is constantly growing with high-quality additions. Is there a specific type of content or component you’d like to see more of?
Glenn Töws
Absolutely crazy. It's basically the shadcn/ui approach taken to the next level, and I love it <3
Serafim
Maker
@glenntoews Thank you, Glenn! That’s exactly the goal—to take the best ideas from shadcn/ui and push them even further. Is there anything specific you think could make it even better? Always open to suggestions!
Stepan Solodnev
Congratulations on the launch! 🎉 How much time did it take from the initial idea to the official launch of 21st.dev, and what were the biggest challenges you faced during development?
Serafim
Maker
Thank you, Stepan! It took about 70 days of full-time work, and the hardest part was building a registry where components could be published directly from the site and installed seamlessly via the shadcn CLI. On top of that, publishing and testing 800+ components to ensure they work flawlessly was a massive challenge. Rendering Tailwind dynamically was another big hurdle, as platforms like CodeSandbox don’t natively support it. What part of the project stands out to you the most?
Serafim
Maker
@solodnev Thank you, Stepan! That’s a great question. Each component is designed to be used independently, and we’ve put a lot of effort into ensuring compatibility across components by standardizing dependencies and adhering to Tailwind and React best practices. To minimize versioning or compatibility issues, we recommend using the shadcn CLI to install components, as it automatically manages dependencies and avoids conflicts. Additionally, we’re working on documentation with guidelines and examples for seamless integration when mixing and matching components. If you have any specific concerns or scenarios in mind, I’d love to hear them!
Launching soon!
It looks great. Will check it out.
Serafim
Maker
@hamza_afzal_butt Thank you, Hamza! Let me know your thoughts after checking it out. I’d love to hear your feedback!
Max Comperatore
this is mindblowing
Serafim
Maker
@maxcomx thank you!
Viktar Patotski
Helps to become 10x developer! Nice!
Serafim
Maker
@xp_vit Thank you, Viktar! Glad you feel that way—helping developers level up is exactly what we aim for. If there’s anything else you think could make it even more powerful, let us know!
Theodore Calafatidis
Good job guys! This is actually pretty useful. Have not tried it yet, but from your demo videos I notice that unlike some of the component libraries I have used, this looks very easy and simple to integrate.
Serafim
Maker
@th_calafatidis Thank you, Theodore! I’m glad the demos made it look easy—that’s exactly what we’re aiming for. If you get a chance to try it out, I’d love to hear your thoughts or any feedback on the integration process!
Theodore Calafatidis
@serafimcloud hey i did try it already! made a post about it on X. Very cool stuff! Bolt was able to add an animated component into a project just by copy and paste the prompt. This is actually usefull for me that i mainly do backend AI engineering and this helps make the front end beautiful pretty fast!
Serafim
Maker
@th_calafatidis That’s awesome to hear! Thanks for sharing your experience—glad to know it’s helpful for you. If you have any suggestions or features you’d like to see added, feel free to let us know!
Pavel Skalin
Looks amazing! Can I fully customize the components?
Serafim
Maker
@pskalin Absolutely! Full customization is one of the core ideas—every component is designed to be fully tweakable to match your project’s style. You own the code, so you can adjust everything: Tailwind classes, structure, functionality, and more. Are there any particular features or design elements you’d want to adapt to your needs?
Pavel Skalin
@serafimcloud Yes, I'm looking to customize the layout structure, animations, and color themes to align with my brand style.
Serafim
Maker
@pskalin That sounds awesome, Pavel! The components are built with exactly this in mind—customizing layout structures, animations, and color themes is straightforward with Tailwind. If you run into any challenges aligning them with your brand style, let me know—I’d love to help or hear your feedback!
Dmitry Vlasov
What is the difference between published and hunted?
Serafim
Maker
Great question! Developers can publish their own components directly to the library, making them available for others. Additionally, ‘hunters’ can discover great components made by others and publish them to the library as well. This way, the collection constantly grows with high-quality contributions from the community. Does that sound like something you’d be interested in contributing to?
William Jin
This could really enhance my AI projects with professional designs. What’s your favorite UI element to use for inspiration?
Serafim
Maker
@william_jin Thank you! Really glad you see the potential for AI projects. My favorite? Probably the evervault card components—they’re simple but endlessly flexible for showcasing data or designs. What about you? Is there a specific component or UI pattern you often look for to speed up your work?
Pavel Sadikov
Awesome launch! Do you plan to add community-driven features like voting for new components or collaborative tools?
Serafim
Maker
@pavel_sadikov Thank you, Pavel! Community-driven features are definitely part of our long-term vision. Voting for new components is a fantastic idea, and we’re also considering collaborative tools for teams. Are there any specific features you’d like to see implemented first?
Serafim
Maker
@pavel_sadikov Great ideas, Pavel! We already display the number of likes on each component’s page, and later today we’ll roll out an update to show likes and views directly in the component listings. For contributions, we’re working on a clear process with features like pull requests and discussion threads. Any specific metrics or workflows you’d like to see?
Kirill Ilichev
Looks great Can people contribute new components?
Serafim
Maker
@kirill_ilichev Absolutely, Kirill! Developers and designers can contribute new components through our self-serve ‘Publish Component’ feature. It’s a simple process, and it helps the library grow with high-quality additions from the community. Are there any components you’d like to contribute or see added?
Serafim
Maker
@kirill_ilichev That makes sense, Kirill! If you end up using it for your current or next startup, I’d love to hear how it works for you and if there’s anything we can improve to make it even better for your needs.