Drawer
A drawer slides in from a screen edge. Part of the page behind it stays visible.
Find the word.
Build the idea.
Describe the interface or flow you can picture but cannot name. Vibulary finds the right term, shows a visual example, and turns it into a clear build request.
Use your own words. We look at what it is, what it does, and when you need it.Not sure how to ask? Try
MCP · Connect to your AI559guides10topics10languages128live demos
See it. Name it.Try the interface
Drawer.
A panel that slides in from the side.
From a feeling. To a working idea.Atlas
Learn the words you need to build an idea.
We show where each term comes from. Standards, official guides, and common industry words have different labels.
Button
A button is a control you press to make something happen on the current screen.
Modal Dialog
A modal dialog is a focused window. It blocks the current screen until someone closes or finishes it.
Bottom Sheet
A bottom sheet is a touch-friendly panel. It rises from the bottom and may stop at set heights.
Command Palette
A command palette is a keyboard-friendly search panel. It opens actions, pages, and recent items.
Glassmorphism
Glassmorphism is a visual style with clear layered surfaces. It uses blur, light borders, and a small sense of depth.
Spring Animation
Spring animation follows a physics model. Stiffness, damping, mass, and starting speed control how it moves.
Design Token
A Design Token names one design choice. Examples include a color, space, font, or motion speed.
Accessibility
Accessibility helps people with different abilities understand and use a product.
Product Goal
A Product Goal states the useful result a product should create for users or the business.
Retrieval-Augmented Generation
Retrieval-Augmented Generation, or RAG, finds outside evidence at run time. It gives that evidence to a model before writing.
API & Endpoint
An API is a set of rules for software to talk to software. An endpoint is one address and one operation in that API.
CSS Grid
CSS Grid is a layout system for rows and columns together. It can set fixed areas or change them as space changes.
Form Validation
Form validation uses rules and messages to find, prevent, and explain missing or wrong answers.
Toast
A toast is a short status message. It doesn't block the page and usually leaves on its own.
Git, Repository, Branch & Commit — Learning Bundle
This learning bundle connects four Git ideas. Git's the version-control system. A repository stores its objects and references. A branch names a line of work. A commit records a project state with metadata. The bundle is not one Git term.
Reduced Motion
Reduced Motion is an accessibility setting and design mode. It removes or simplifies movement that people do not need.
Problem Statement
A Problem Statement says who has a problem, when it happens, and why solving it matters.
Pick the pattern that fits the job.
Two patterns can look alike but do different jobs. These short rules help you choose.
↯↗
Button vs. Link
Button changes something here. Link takes you somewhere else.
□▯▱
Modal Dialog vs. Drawer vs. Bottom Sheet
Use a dialog for one decision, a drawer for side work, and a bottom sheet for a few actions on a small screen.
▤◌
Skeleton vs. Spinner
A skeleton shows the shape of content that is loading. A spinner only shows that the app is busy.
☑◉⊙
Checkbox vs. Switch vs. Radio Group
Checkboxes can select many items. A switch changes a setting now. Radio buttons select only one item.
Can you name the UI pattern?
Read the situation, then choose the clearest term. No trick questions.
Score 0 / 2
Situation · 1/2
When you press “Save draft,” the site saves your changes and tells you if it worked.
Turn UI words into a clear build request.
Write what you need. Then choose what the UI does, how it looks, and how it moves. We turn it into a request you can copy.
Say who needs this, what is happening, and what should happen next.
VIBULARY / REQUEST● ● ●
Say who needs this, what is happening, and what should happen next.Say who needs this, what is happening, and what should happen next.
V.✦
Clear words, useful examples.
Each guide starts with a simple meaning and a clear example. Technical names appear only when they help you build it.