# UI Atlas

> A free library of UI elements for websites and apps: buttons, dropdowns, hamburger menus, tabs, modals, whiteboard tools. Every element has a live example, its variants and its name in code.

The site is in English. Every interface element has its own page: a short definition, what it is for, where it appears, what it is called in code, synonyms and everyday names (“three lines” — hamburger menu). By Kris Anfalova.

- [The full text of all elements in one file](https://ui-atlas.designs.tools/llms-full.txt)
- [Sitemap](https://ui-atlas.designs.tools/sitemap.xml)

## Text and content

- [Headings and paragraphs](https://ui-atlas.designs.tools/element/heading/): A heading names a page or a section and is set larger than the text around it. A paragraph is the regular text underneath.
- [Link](https://ui-atlas.designs.tools/element/link/): Clickable text that takes you to another page, or to another spot on the same page.
- [Badge](https://ui-atlas.designs.tools/element/badge/): A small pill or circle with a short word or number: “New”, “−20%”, “3”.
- [Avatar](https://ui-atlas.designs.tools/element/avatar/): A small picture that stands for a person: a photo, their initials or a generic user icon.

## Buttons and actions

- [Button](https://ui-atlas.designs.tools/element/button/): An element you click or tap to make something happen: send a form, save your data, go to the next step.
- [Toggle (switch)](https://ui-atlas.designs.tools/element/toggle/): A control that flips between two states: on and off.
- [Three-dot menu](https://ui-atlas.designs.tools/element/action-menu/): An icon, usually three dots in a row or a column, that opens a hidden list of secondary actions.
- [Floating action button](https://ui-atlas.designs.tools/element/fab/): A round button that floats above the rest of the content, usually in a bottom corner of the screen.
- [Context menu](https://ui-atlas.designs.tools/element/context-menu/): A hidden menu that appears when you interact with a particular object: right-click it, or press and hold.
- [Drag and drop](https://ui-atlas.designs.tools/element/sortable-list/): An interaction where you grab an item with the cursor or a finger and move it to a new place. The spot to grab is often marked with its own icon (a drag handle).
- [Copy button](https://ui-atlas.designs.tools/element/copy-button/): A button that copies a piece of text to the clipboard with one click.

## Inputs and forms

- [Text input](https://ui-atlas.designs.tools/element/text-input/): A field where a person types something in: letters, numbers, symbols.
- [Dropdown list](https://ui-atlas.designs.tools/element/select/): A field that opens a list when you click it, so you can pick one or several options.
- [Checkbox](https://ui-atlas.designs.tools/element/checkbox/): A small square you tick to select an option, and untick to deselect it.
- [Radio button](https://ui-atlas.designs.tools/element/radio/): A small circle used to pick one option out of several. Choosing another one clears the previous choice.
- [Slider](https://ui-atlas.designs.tools/element/slider/): A control for picking a value, or a range of values, by dragging a handle along a track.
- [Date picker](https://ui-atlas.designs.tools/element/date-picker/): A control for choosing a date, or a range of dates, from a visual calendar.
- [File upload](https://ui-atlas.designs.tools/element/file-upload/): A control for adding files to a system: a choose-file button, or an area you drop files onto (a dropzone).
- [Verification code input](https://ui-atlas.designs.tools/element/otp-input/): A field split into separate cells, one for each character of a one-time code.
- [Quantity selector](https://ui-atlas.designs.tools/element/quantity-input/): A control that changes a number with increase and decrease buttons, usually a field with “+” and “−” buttons.
- [Tag input](https://ui-atlas.designs.tools/element/tag-input/): A text field that turns each word or phrase you type into its own tag once you press Enter or a comma.
- [Color picker](https://ui-atlas.designs.tools/element/color-picker/): A tool for choosing a color: a palette, a set of ready-made swatches, or a field for HEX, RGB or HSL values.

## Navigation

- [Hamburger menu](https://ui-atlas.designs.tools/element/hamburger/): An icon of three horizontal lines that hides the main menu off-screen until you tap it.
- [Tabs](https://ui-atlas.designs.tools/element/tabs/): A row of labels above a block of content. Click one and the block shows that section.
- [Breadcrumbs](https://ui-atlas.designs.tools/element/breadcrumbs/): A small trail of links that shows the path from the home page to where you are now.
- [Pagination](https://ui-atlas.designs.tools/element/pagination/): A way to split a long list into separate pages or batches.
- [Site header](https://ui-atlas.designs.tools/element/site-header/): The block across the top of a page that holds the logo and the main navigation.
- [Site footer](https://ui-atlas.designs.tools/element/site-footer/): The block at the very bottom of a page with supporting information and links.
- [Sidebar](https://ui-atlas.designs.tools/element/sidebar/): A vertical navigation panel along the left or right edge of the screen.
- [Stepper](https://ui-atlas.designs.tools/element/stepper/): A progress indicator that breaks a long process, like filling in a long form, into a sequence of steps.
- [Back-to-top button](https://ui-atlas.designs.tools/element/back-to-top/): A floating button, usually with an up arrow, that takes you back to the top of the page.
- [Table of contents](https://ui-atlas.designs.tools/element/table-of-contents/): A list of links to the sections of a long document, each one jumping to its place on the page.

## Page structure

- [Card](https://ui-atlas.designs.tools/element/card/): A rectangular block that gathers everything about one thing: a photo, a name, a price, a button.
- [Accordion](https://ui-atlas.designs.tools/element/accordion/): A vertical list of headings. Click one to open or close the content hidden under it.
- [Carousel (slider)](https://ui-atlas.designs.tools/element/carousel/): A block that lets you flip through a set of images or cards by scrolling sideways.
- [Modal window](https://ui-atlas.designs.tools/element/modal/): A window that appears over the page. Until you close it, you can’t do anything else on the page.
- [Table](https://ui-atlas.designs.tools/element/data-table/): Data laid out in rows and columns.
- [Empty state](https://ui-atlas.designs.tools/element/empty-state/): What a screen or component shows when there is nothing to display: no results, an empty list, a failed load.
- [Pricing table](https://ui-atlas.designs.tools/element/pricing-table/): A block that lays out the price options for a service or product so you can compare them at a glance.
- [Testimonials](https://ui-atlas.designs.tools/element/testimonials/): A social-proof block with feedback from users about a product or service.
- [Lightbox gallery](https://ui-atlas.designs.tools/element/lightbox/): A way of viewing images where clicking a thumbnail opens it in an overlay on top of the page.
- [Timeline](https://ui-atlas.designs.tools/element/timeline/): A component that shows a sequence of events or stages in order along a line, usually a vertical one.

## Feedback and status

- [Loading indicators](https://ui-atlas.designs.tools/element/loader/): Anything that shows the site is busy: a progress bar, a spinning icon, or gray placeholders where content will appear.
- [Toast (notification)](https://ui-atlas.designs.tools/element/toast/): A small message that pops up briefly at the bottom or in a corner of the screen and disappears on its own.
- [Tooltip](https://ui-atlas.designs.tools/element/tooltip/): A small text bubble that appears when you hover over or focus on an element.
- [Alert banner](https://ui-atlas.designs.tools/element/alert/): A colored strip on the page with an important message: information, success, a warning or an error.
- [Notification center](https://ui-atlas.designs.tools/element/notification-center/): A place that collects system messages and events, reached through an icon, usually a bell in the header, often with an unread badge.
- [Product tour](https://ui-atlas.designs.tools/element/product-tour/): A sequence of contextual hints that guide a user’s attention to the key parts of an interface.
- [Offline state](https://ui-atlas.designs.tools/element/offline-banner/): What the interface shows when the network connection is lost.
- [404 error page](https://ui-atlas.designs.tools/element/error-page/): The page a server returns when you go to an address that doesn’t exist.

## Mobile patterns

- [Bottom navigation](https://ui-atlas.designs.tools/element/bottom-nav/): A navigation bar fixed to the bottom of a phone screen, with 3–5 icons for the main sections.
- [Bottom sheet](https://ui-atlas.designs.tools/element/bottom-sheet/): A panel that slides up from the bottom edge of the screen over the current content, used for extra actions or settings.
- [Swipe actions](https://ui-atlas.designs.tools/element/swipe-actions/): A swipe is a finger sliding across the screen. Swipe a list row left or right to delete or archive it, an email for example.
- [Pull to refresh](https://ui-atlas.designs.tools/element/pull-to-refresh/): A gesture: drag a list down when it’s already scrolled to the very top. A loading icon appears and the content refreshes.
- [Long press](https://ui-atlas.designs.tools/element/long-press/): A gesture where you hold your finger on an element for a set time, usually 500 ms or more, until an action fires.
- [Swipe cards](https://ui-atlas.designs.tools/element/swipe-cards/): A stack of cards where you decide about each one by swiping it in a particular direction.
- [Pinch to zoom](https://ui-atlas.designs.tools/element/pinch-zoom/): A multi-touch gesture for changing scale: bring two fingers together to zoom out, spread them apart to zoom in.
- [Splash screen](https://ui-atlas.designs.tools/element/splash-screen/): The first screen an app shows while it starts up, usually with a logo and some branding.

## Online whiteboards

- [Infinite canvas](https://ui-atlas.designs.tools/element/canvas/): The working area of a whiteboard, with no edges. You can move it in any direction, zoom in and zoom out.
- [Sticky note](https://ui-atlas.designs.tools/element/sticky-note/): A digital version of a paper sticky note, used to write down a short piece of text.
- [Selection and handles](https://ui-atlas.designs.tools/element/selection/): A frame around the selected object with small squares at the corners. You drag the squares to resize it.
- [Connectors](https://ui-atlas.designs.tools/element/connector/): A line or arrow between two objects on a board. Move an object, and the line follows it.
- [Frame](https://ui-atlas.designs.tools/element/frame/): A container area on an infinite canvas that groups the objects inside it. It often sets the size of a finished screen or slide.
- [Toolbar](https://ui-atlas.designs.tools/element/board-toolbar/): A row of buttons at the edge of a board: cursor, hand, sticky note, shape, text. The selected tool is highlighted.
- [Minimap](https://ui-atlas.designs.tools/element/minimap/): A shrunken copy of the whole board in a corner of the screen. A frame on it shows which part you’re looking at.
- [Collaborator cursors](https://ui-atlas.designs.tools/element/cursors/): The pointers of other people who are in the same document at the same time, usually marked with a color and a name.
- [Kanban board](https://ui-atlas.designs.tools/element/kanban/): A way to show a workflow: columns for statuses, and task cards that move from one column to the next.
- [Comment pin](https://ui-atlas.designs.tools/element/comment-pin/): A marker (an icon or an avatar) attached to a specific spot or element on a canvas or screen. It opens a discussion thread.
- [Workshop timer](https://ui-atlas.designs.tools/element/workshop-timer/): A facilitation tool that shows a countdown for a session, visible to everyone on the board.

## Online store

- [Cart](https://ui-atlas.designs.tools/element/cart/): The place in an online store that holds the items you’ve picked before you place an order.
- [Catalog filters](https://ui-atlas.designs.tools/element/catalog-filters/): A set of controls, like checkboxes, selects and sliders, for narrowing down a list by several criteria.
- [Size picker](https://ui-atlas.designs.tools/element/size-picker/): A set of options, often radio buttons or chips, for picking a specific variant of a product.
- [Promo code field](https://ui-atlas.designs.tools/element/promo-code/): A text field for entering a code of letters and numbers that recalculates the order total.
- [Discounted price](https://ui-atlas.designs.tools/element/price/): A way of showing prices with the original price crossed out, the sale price and the amount you save.

## Social buttons

- [Like button](https://ui-atlas.designs.tools/element/like/): A one-tap way to show you approve of something, or to save it to your own collection.
- [Star rating](https://ui-atlas.designs.tools/element/rating/): A way to rate something and to show how satisfied people were, usually on a five-point scale.
- [Share button](https://ui-atlas.designs.tools/element/share/): A button that sends the current content out through other channels: social networks, messengers.

## Author

- [X](https://x.com/krisanfalova)
- [Instagram](https://www.instagram.com/uiux_kris/)