21st.dev
Create, remix and share UI components with AI
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!
Ryden Sun
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!
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?
Iurii Dorofeev
@serafimcloud I use JetBrains products. Please don't judge me, haha
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!
Iurii Dorofeev
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?
Stepan Solodnev
@serafimcloud It’s really impressive that you managed to launch everything in about 70 days! Since each component can be used independently, do you anticipate any versioning or compatibility issues when developers mix and match multiple components? Or is it generally straightforward to combine them without running into conflicts? I'd love to hear if you've set up any particular guidelines or best practices for seamless integration.
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!
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!
Viktar Patotski
@serafimcloud I'm still about to dive a bit deeper into your product.
123
•••
Next
Last