User Interface (UI) Elements
Interactive Gallery

You can use these little pop-ups to tell the user that an action was successful—like saving a file—without interrupting their flow.

Commonly called "Delightful Details," these fun animations give users a digital "high-five" when they reach a goal. Try one out below!

SVG icons are an easy way to add visuals to your app without managing external links and image files. Because they're built with code, they scale cleanly and can be quickly styled to match your design.

Pills & badges are small, rounded UI elements that help users quickly filter information or see important metadata at a glance. They're often used for categories, tags, or status labels.

Use accordions to hide technical details or FAQs. It keeps the layout clean until the user is ready to see more.

Before your data loads, you can show "skeletons" of where the content will be. It feels faster and smoother than a blank white screen.

Great inputs should have clear labels and a bold "focus" state so users always know exactly where they are typing.

Progress bars give a visual sense of completion, helping users track where they are in a task and how much is left to finish.

Toggles are perfect for binary choices. Flip the switch below to see immediate tactile feedback!

Use modals to direct attention to specific tasks. They dim the background to ensure users aren't distracted.

Tooltips are small messages that appear when a user hovers over an element. They provide helpful context without taking up space in the main interface, keeping the design clean while still offering guidance when needed. Hover over the help icons below to see them in action.

Use color hierarchy to guide users toward the main goal while keeping secondary actions subtle. This helps prevent decision fatigue by clarifying the path forward.

Interactive elements like buttons can use subtle motion to reinforce feedback — like darkening on hover and pressing in on click. Try the options below.

Feedback

If a button can't be used yet, show it in a disabled state by fading it out so users know it isn't currently available. This helps indicate that an action is waiting on something else to be completed first, like filling out a form or finishing a previous step.

Responsiveness means your app automatically adjusts its layout and spacing to fit different screen sizes. A responsive design keeps everything readable and easy to use, whether someone is on a phone, tablet, or larger screen.

Use spacing to make your layout feel clean. Adjust the sliders below to see how internal and external space changes the vibe:

Empty states are what users see when there's no content yet in a section of your app. Instead of showing a blank screen, you can use a helpful message and simple visuals to guide users on what to do next or explain why it's empty.

Easter eggs are hidden features or secrets tucked away for curious users to find. These digital surprises can range from a secret dark mode theme to a hidden game, or even small interactive moments like clicking an icon to trigger a playful animation or message.

Can you find the hidden easter egg on this page?