UI Components | 김미소의 포트폴리오

Button Variants

Sun, 05 Oct 2025 00:00:00 +0000

While working on projects, I often found that slight variations in button styles disrupted overall design consistency. To address this, I started an experiment to create reusable button components.

Using TailwindCSS’s @apply, I explored how to combine base styles, sizes, and state changes into a single component class. Based on this, I created several button “variants” such as Primary, Success, and Danger to suit different use cases.

I focused especially on providing consistent visual feedback for various states like hover, focus, and active. I also standardized details such as shadows and border-radius so that any button could fit seamlessly within the design system.

This experiment went beyond simple styling — it was about exploring how to manage UI components systematically and improve reusability. I believe this will serve as a solid foundation to accelerate development in future projects.

Modal Animation

Sat, 04 Oct 2025 00:00:00 +0000

I realized that when modal windows on websites appear or disappear too abruptly, they can disrupt the user experience. So I experimented with Framer Motion to see how to make them appear smoother and more natural.

First, I explored how Framer Motion’s AnimatePresence component works in order to implement the exit animation for the modal. Based on that, I combined two effects for the best result: a fading background (Fade) and a slightly enlarging window (Scale) when the modal appears.

Beyond animation, I also added usability improvements such as allowing the modal to close when pressing the ESC key or clicking outside the darkened background area. Through this experiment, I was reminded that animation is not merely decorative but an essential UX tool that helps guide interaction flow without interrupting user behavior.

Dashboard Card

Fri, 03 Oct 2025 00:00:00 +0000

When building dashboards that present data at a glance, I believe the most essential element is the “card” component. So I conducted a small experiment to create a clean, versatile card UI that fits well in any context.

Since simple borders alone couldn’t convey enough depth, I explored how to combine Tailwind’s shadow and ring utilities to achieve the cleanest, most balanced look. I also experimented with subtle hover effects—where the shadow and border color shift softly—to give users a sense of focus and interactivity.

Inside each card, I adjusted font size and weight to make the key metric stand out clearly, seeking the optimal visual hierarchy. Through this experiment, I was able to explore the small UI design details that naturally guide the user’s attention and improve data readability.

Dark Mode Toggle

Thu, 02 Oct 2025 00:00:00 +0000

I wanted to understand how the now-essential dark mode feature on modern websites actually works, so I implemented it myself from scratch.

I started by using React’s useState to manage the ’light’ and ‘dark’ themes and explored how TailwindCSS’s dark: class operates. Beyond just toggling the state, I also experimented with persisting the user’s theme preference using localStorage so that it remains even after a page refresh.

After implementing the functionality, I focused on enhancing the visual polish. I applied transition-colors for smooth background transitions when switching themes and used Framer Motion to make the toggle switch move in a more playful and engaging way.

Through this seemingly simple toggle, I was able to explore various aspects of state management, data persistence, and visual details that enhance the overall user experience.