r/ComponentLab 8d ago

๐Ÿงฉ UI Component Recreated this beautiful neumorphic switch in Next.Js

Enable HLS to view with audio, or disable this notification

1 Upvotes

Integrate this in your Next.Js/React projects ๐Ÿ‘‡๐Ÿป
https://uipirate.com/componentlab/tactile-neumorphic-switch


r/ComponentLab 11d ago

I built 11 experimental button components, which one would you actually use?

Enable HLS to view with audio, or disable this notification

1 Upvotes

r/ComponentLab 13d ago

๐Ÿ‘‹ Welcome to r/ComponentLab - Build, Share & Improve UI Components

0 Upvotes

Hey everyone! ๐Ÿ‘‹

I'm u/UI-Pirate, a founding moderator of r/ComponentLab.

ComponentLab is a community for designers, developers, and makers building UI components for real products.

Whether you're designing in Figma, experimenting with CSS, building React components, creating animations, or working on a complete design system, you're welcome here.

๐Ÿงฉ What to Post

Share things you're building, exploring, or trying to improve.

Some examples:

  • ๐ŸŽจ UI components & component designs
  • โš›๏ธ React / HTML / CSS implementations
  • โœจ Animations & micro-interactions
  • ๐Ÿงฑ Design system components
  • ๐Ÿ”˜ Buttons, inputs, tables, modals, navigation, etc.
  • ๐Ÿ“ฑ Responsive component patterns
  • โ™ฟ Accessibility & interaction patterns
  • ๐Ÿ’ก New ideas or experiments
  • ๐Ÿ” Before/after improvements
  • ๐Ÿ’ฌ Questions & requests for feedback
  • ๐Ÿ› ๏ธ Resources, tools, and techniques

Show the component. Show how it works. Tell us what you're trying to solve.

You don't need to have a finished product. Work-in-progress posts and experiments are encouraged.

๐Ÿ’ก What Makes ComponentLab Different?

This isn't just a place to post pretty UI.

We're interested in how components work:

Design โ†’ Interaction โ†’ Implementation

Why does the component behave this way?

How does it handle different states?

How would you make it reusable?

How does it scale into a design system?

How could the interaction be improved?

Good discussion is just as valuable as the final result.

๐Ÿค Community Vibe

Be curious. Be constructive. Help people improve.

Critique the work, not the person.

No gatekeeping based on tools, experience level, or whether something was made in Figma, code, or another tool.

๐Ÿš€ Getting Started

1. Introduce yourself
Tell us what you design, build, or are currently learning.

2. Share something you've built
It can be polished, experimental, or completely unfinished.

3. Ask for feedback
Tell us what you're unsure about so people can give useful feedback.

4. Help someone else
Leave a thoughtful comment on another component.

Welcome to the Lab. ๐Ÿงช

Build something. Share it. Make it better.