Библиотека под каждую мелкую деталь

Кнопки, тумблеры, шторки, загрузчики, поля, карточки и микроанимации: выбираешь, нажимаешь «Вставить», деталь встаёт в страницу. Ноль кредитов, снимается одним нажатием.

1 350 готовых карточек своих · 5 239 открытых элементов из пятнадцати библиотек

Поиск по библиотекеВид

Каждая карточка живая: в превью работает тот же код, который вставит билдер, в песочнице.

Жидкая навигацияАктивная вкладка не едет по полосе, а расплавляет её: капля отрывается от полосы и снова сливается с нейзаливкаконтурмягкийстеклонеон

Печать чекаОплата заканчивается не галочкой: кнопка становится строкой состояния, а из щели под ней рывками выходит бумажный чекзаливкаконтурмягкийстеклонеон

Кнопка «Поделиться»Сама кнопка вытягивается в ряд знаков сетей, капля под курсором подписывает выбор, после нажатия ряд сворачивается в подтверждениезаливкаконтурмягкийстеклонеон

Кинетическая сеткаТочки расступаются перед курсором: в центре проседают, по краю вспыхивает кольцо, дальние стоят на местезаливкаконтурмягкийстеклонеон

Орбита экрановЭкраны идут по объёмному кольцу и всегда смотрят на зрителя; кольцо поворачивается и наклоняется за курсоромзаливкаконтурмягкийстеклонеон

Слово перетекает в словоСтарое слово растекается и собирается в новое, а под ним из тех же блоков перестраивается макет того, что названозаливкаконтурмягкийстеклонеон

Тумблер как на телефонеМягкая дорожка, бегунок с тенью, при нажатии вытягивается и возвращаетсязаливкаконтурмягкийстеклонеон

Тумблер света и темнотыВнутри бегунка солнце перетекает в луну, дорожка загорается цветом сайтазаливкаконтурмягкийстеклонеон

Тумблер с подписью состоянияСлово рядом меняется вместе с положением и уезжает вверх, а не мигаетзаливкаконтурмягкийстеклонеон

Трёхпозиционный переключательОдна дорожка на три положения, бегунок доезжает до выбранногозаливкаконтурмягкийстеклонеон

Тумблер с загрузкойПри включении вокруг бегунка один раз пробегает кольцо: настройка ушла на серверзаливкаконтурмягкийстеклонеон

Крупный тумблерУвеличенная дорожка для пальца и заметная подпись: для настроек на телефонезаливкаконтурмягкийстеклонеон

Тумблер с текстом внутриСлова «вкл» и «выкл» живут в самой дорожке и меняются вместе с бегункомзаливкаконтурмягкийстеклонеон

Квадратный тумблерПрямые углы и короткий ход: для технических панелей, где всё по сеткезаливкаконтурмягкийстеклонеон

Список настроек с тумблерамиТри строки с пояснениями и своим тумблером, разделённые волосяной линиейзаливкаконтурмягкийстеклонеон

Тумблер согласияСогласие с подчёркнутой ссылкой на условия: ссылка кликается отдельно от тумблеразаливкаконтурмягкийстеклонеон

Призрачная кнопкаВ покое только надпись со значком, подложка всплывает при наведении и при фокусезаливкаконтурмягкийстеклонеон

Кнопка с наезжающей заливкойПри наведении заливка наезжает слева направо, стрелка уходит следомзаливкаконтурмягкийстеклонеон

Разрезная кнопкаОсновное действие слева, стрелка справа открывает список соседних действийзаливкаконтурмягкийстеклонеон

Копировать со сменой подписиРядом видно, что именно копируется, а подпись кнопки уезжает вверх на «скопировано»заливкаконтурмягкийстеклонеон

Скачать с полосойПо нижней кромке бежит полоса, значок крутится, потом встаёт галочказаливкаконтурмягкийстеклонеон

Кнопка «поделиться»Три способа поделиться стоят рядом приглушёнными и расходятся при наведениизаливкаконтурмягкийстеклонеон

Кнопки «назад» и «далее»Тихая кнопка назад и основная вперёд, между ними номер шага, стрелки расходятсязаливкаконтурмягкийстеклонеон

Кнопка «вверх» с кольцомКруглая кнопка с кольцом прочитанного, стрелка подпрыгивает при наведениизаливкаконтурмягкийстеклонеон

Плавающая кнопка с подсказкойКруглая кнопка действия, подсказка выезжает слева при наведении и с клавиатурызаливкаконтурмягкийстеклонеон

Кнопка с градиентной обводкойРамка собрана из оттенков фирменного цвета и медленно перетекает по кругузаливкаконтурмягкийстеклонеон

Кнопка с бликомПри наведении и при фокусе по кнопке один раз проходит косой бликзаливкаконтурмягкийстеклонеон

Кнопка с волной от нажатияОт нажатия из середины расходится круг и медленно тает, без единой строки скриптазаливкаконтурмягкийстеклонеон

Кнопка со значком, который становится галочкойПлюс крутится в кольцо ожидания, а когда всё сохранилось, рисуется галочказаливкаконтурмягкийстеклонеон

Удерживать для подтвержденияЗаливка наполняет кнопку, пока палец на месте, и отпускание всё отменяетзаливкаконтурмягкийстеклонеон

Смахнуть для подтвержденияБегунок тянется вправо, заливка идёт за ним, случайно нажать нельзязаливкаконтурмягкийстеклонеон

Кнопка со счётчикомЧисло висит на углу кнопки и слегка подпрыгивает, когда на кнопку наводятзаливкаконтурмягкийстеклонеон

Подписка с состоянием «подписан»Имя кнопки не меняется, меняется положение, а надпись уезжает вверх с галочкойзаливкаконтурмягкийстеклонеон

Голос вверх и внизДве стрелки вокруг счёта, нажатая подсвечивается и коротко подскакиваетзаливкаконтурмягкийстеклонеон

Оценка звёздами со словомПять звёзд наливаются цветом, а под ними появляется слово выбранной оценкизаливкаконтурмягкийстеклонеон

Счётчик количестваМинус и плюс по краям, число посередине моноширинными цифрамизаливкаконтурмягкийстеклонеон

Переключатель видаСписок и плитка: подсветка переезжает под выбранный значокзаливкаконтурмягкийстеклонеон

Бургер, который становится крестикомТри полосы съезжаются в крест: средняя тает, крайние поворачиваются навстречузаливкаконтурмягкийстеклонеон

Северное сияниеТри ленты света идут поверху, снизу остаётся тёмное небо со звёздамизаливкаконтурмягкийстеклонеон

Метеорный дождьВосемь искр с хвостами наискось падают через кадр, каждая в свой черёдзаливкаконтурмягкийстеклонеон

Ретро-сеткаСетка уходит к горизонту и бежит на зрителя, над ней полосатое солнцезаливкаконтурмягкийстеклонеон

Точечная сеткаРовная сетка точек, и пятно света, которое идёт за курсоромзаливкаконтурмягкийстеклонеон

Лучи светаПять узких лучей расходятся из точки наверху и еле заметно качаютсязаливкаконтурмягкийстеклонеон

Цветной туманЧетыре пятна цвета плывут и меняют форму, оттенки расходятся от фирменногозаливкаконтурмягкийстеклонеон

Шумовая вуальНастоящее зерно поверх цветной заливки: плёнка, а не пластикзаливкаконтурмягкийстеклонеон

Кольцо свеченияДва тонких кольца вращаются навстречу, в середине дышит ореолзаливкаконтурмягкийстеклонеон

Бегущая волнаТри волны идут с разной скоростью и складываются в живую водузаливкаконтурмягкийстеклонеон

Рябь от нажатияКруги расходятся сами, а при нажатии разлетаются втрое быстреезаливкаконтурмягкийстеклонеон

Светящаяся обводкаПо рамке блока бежит луч, внутри всё остаётся спокойнымзаливкаконтурмягкийстеклонеон

Градиентная сеткаДвенадцать цветных клеток размываются в один перетекающий фонзаливкаконтурмягкийстеклонеон

Градиентный заголовокПо буквам без конца переливается градиент из цветов страницызаливкаконтурмягкийстеклонеон

Блик по текстуСветлая полоса раз в несколько секунд проходит по буквамзаливкаконтурмягкийстеклонеон

Пишущая машинкаСтрока печатается по букве и стирается обратно, курсор мигаетзаливкаконтурмягкийстеклонеон

Слово-сменщикПоследнее слово заголовка меняется на следующее, остальное стоит на местезаливкаконтурмягкийстеклонеон

ГлитчСлово рвётся на цветные слои и тут же собирается обратнозаливкаконтурмягкийстеклонеон

Контурный текстБуквы нарисованы контуром, и заливка наползает на них слеваконтурмягкийстеклонеон

Неоновая вывескаТрубка горит, слегка подмигивает и держит своё тёмное полезаливкамягкийстеклонеон

Заголовок с подсветкойЗа одним словом разворачивается цветная плашка, как след маркеразаливкаконтурмягкийстеклонеон

Подчёркивание мазкомПод словом рисуется неровная линия, как будто провели кистьюзаливкаконтурмягкийстеклонеон

Цитата со светомКрупная цитата, за кавычкой мягко разгорается пятно светаконтурмягкийстеклонеон

Счётчик достиженийТри числа с подписями, под каждым загорается своя чертазаливкаконтурмягкийстеклонеон

Табло с цифрамиШесть барабанов докручиваются до своей цифры, каждый чуть позже соседазаливкамягкийстеклонеон

Полоса достиженияПолоса доезжает до своей отметки, по ней без конца идёт бликзаливкаконтурмягкийстеклонеон

Кольца прогрессаТри кольца дорисовываются до своей доли и подписывают её числомзаливкаконтурмягкийстеклонеон

Шторка слеваНавигация выезжает от левого края поверх затемнения; та же кнопка закрываетзаливкаконтурмягкийстеклонеон

Шторка справаПодробности строки открываются панелью справа, список остаётся на местезаливкаконтурмягкийстеклонеон

Шторка сверхуПанель опускается от верхней кромки: объявление, поиск или быстрые действиязаливкаконтурмягкийстеклонеон

Нижняя шторка со ступенямиШторка с ручкой встаёт на половине экрана, а кнопка поднимает её на полную высотузаливкаконтурмягкийстеклонеон

Шторка корзиныКорзина въезжает справа со списком, итогом и кнопкой оформлениязаливкаконтурмягкийстеклонеон

Шторка фильтровОтборы уезжают в шторку: отметки, цена и счётчик найденного внизузаливкаконтурмягкийстеклонеон

Шторка настроекНастройки раздела в шторке справа: переключатели с подписью и выбор из списказаливкаконтурмягкийстеклонеон

Мобильное менюМеню на весь экран с крупными пунктами и вложенным разделом, который раскрывается на местезаливкаконтурмягкийстеклонеон

Лист действийСнизу выезжает список действий с отдельной опасной строкой и кнопкой отменызаливкаконтурмягкийстеклонеон

Поиск на весь экранПоиск закрывает страницу целиком: поле, недавние запросы и подсказка по клавишамзаливкаконтурмягкийстеклонеон

Лайтбокс для картинкиСнимок раскрывается поверх страницы с подписью, счётчиком и лентой кадровзаливкаконтурмягкийстеклонеон

Оверлей загрузкиРаздел закрыт полотном с кольцом и подписью, пока данные не приехализаливкаконтурмягкийстеклонеон

Модалка подтвержденияСпрашивает перед необратимым: что именно удаляется, чем это кончится и две кнопкизаливкаконтурмягкийстеклонеон

Модалка с шагамиМастер в окне: полоса шагов сверху, один вопрос на экран, кнопки назад и дальшезаливкаконтурмягкийстеклонеон

Модалка формыКороткая форма в окне: два поля, согласие и кнопка, страница под ним не теряетсязаливкаконтурмягкийстеклонеон

Модалка на весь экранОкно занимает экран целиком: своя шапка, длинное содержимое и кнопка сохранения внизузаливкаконтурмягкийстеклонеон

Модалка с боковой картинкойСлева рисунок и одна мысль, справа текст и кнопка; на телефоне рисунок уходит наверхзаливкаконтурмягкийстеклонеон

Центр уведомленийПанель под колокольчиком: непрочитанные с точкой, время и кнопка отметить всёзаливкаконтурмягкийстеклонеон

Панель помощиВсплывающая справка: поиск по статьям, три ответа и строка живой поддержкизаливкаконтурмягкийстеклонеон

Панель профиляПанель под аватаром: имя, почта, тариф и короткое меню с выходом внизузаливкаконтурмягкийстеклонеон

Панель историиЛента версий с отметкой текущей: когда, кто и что поменял, с возвратом к любойзаливкаконтурмягкийстеклонеон

Контекстное меню строкиКнопка из трёх точек открывает меню действий строки поверх списказаливкаконтурмягкийстеклонеон

Меню с разделамиВыпадающее меню с подписанными группами, горячими клавишами и отдельным низомзаливкаконтурмягкийстеклонеон

Карточка по наведениюНаведите на имя: всплывает карточка автора; кнопка рядом закрепляет её для тех, у кого нет мышизаливкаконтурмягкийстеклонеон

Подсказка с четырёх сторонОдна подсказка в четырёх положениях: сверху, справа, снизу и слева, с хвостикомзаливкаконтурмягкийстеклонеон

Подсказка с заголовкомКружок со знаком вопроса открывает подсказку с заголовком, абзацем и ссылкойзаливкаконтурмягкийстеклонеон

Стопка уведомленийТри уведомления в углу: успех, предупреждение и обычное; крестик убирает своёзаливкаконтурмягкийстеклонеон

Снекбар с отменойСтрока внизу экрана сообщает о действии, предлагает отменить и сама тает по полоске временизаливкаконтурмягкийстеклонеон

Окно согласияОкно про куки в углу: что собираем, ссылка на политику и равные кнопки выборазаливкаконтурмягкийстеклонеон

Приглашение подписатьсяОкно с полосой рисунка, обещанием письма раз в месяц, полем почты и крестикомзаливкаконтурмягкийстеклонеон

Луч по рамкеПо кромке карточки бесконечно бежит светящийся отрезокзаливкаконтурмягкийстеклонеон

Блик под курсоромМягкое пятно света ходит за мышью по карточкезаливкаконтурмягкийстеклонеон

Наклон за курсоромКарточка поворачивается вслед за мышью, как настоящая пластиназаливкаконтурмягкийстеклонеон

Неоновая карточкаТрубка неона по краю дышит, буквы светятся, как вывескаконтурмягкийстеклонеон

Стекло с подсветкойЗа матовым стеклом медленно плывут цветные пятнаконтурмягкийстеклонеон

Колода вееромТри карточки лежат стопкой и разъезжаются веером при наведениизаливкаконтурмягкийстеклонеон

Карточка со шторкойПанель внизу подъезжает вверх и открывает текст под обложкойзаливкаконтурмягкийстеклонеон

Товар с блескомПо карточке товара сама собой проходит полоса светазаливкаконтурмягкийстеклонеон

Отзыв со светящейся кавычкойОгромная кавычка тлеет за текстом и медленно разгораетсязаливкаконтурмягкийстеклонеон

Стена отзывовОтзывы едут лентой без конца, края растворяются в фонеконтурмягкийстеклонеон

Кнопка со световым кольцомВокруг кнопки крутится кольцо света и раз за разом расходится волназаливкаконтурмягкийстеклонеон

Жидкая кнопкаВнутри переливается капля, на наведении она заливает кнопку целикомзаливкаконтурмягкийстеклонеон

Магнитная кнопкаКнопка тянется к курсору, будто примагниченазаливкаконтурмягкийстеклонеон

Кнопка с бегущей рамкойДва светлых отрезка гоняются друг за другом по кромке кнопкиконтурмягкийстеклонеон

Кнопка с искрамиВокруг кнопки взлетают искры, при наведении их становится большезаливкаконтурмягкийстеклонеон

Кнопка со сменой подписиНа наведении подпись уезжает вверх, а снизу приходит втораязаливкаконтурмягкийстеклонеон

Большая кнопка с дрейфом светаПо широкой кнопке медленно плывёт градиент, снизу лежит цветная теньзаливкаконтурмягкийстеклонеон

Док со значкамиПолоса значков: под курсором значок вырастает, соседи чуть приподнимаютсязаливкаконтурмягкийстеклонеон

Орбита из людейДва кольца с лицами медленно кружат вокруг знака в центрезаливкаконтурмягкийстеклонеон

Лента логотиповЗнаки клиентов едут по кругу, края ленты тают в фонеконтурмягкийстеклонеон

Бенто со светомСетка разных плиток, по которой ходит общее пятно светазаливкаконтурмягкийстеклонеон

Тарифы с подсветкойТри тарифа, у среднего по рамке бежит свет и он приподнятзаливкаконтурмягкийстеклонеон

Полоса достиженийЧетыре числа досчитывают от нуля, когда полоса попадает в кадрзаливкаконтурмягкийстеклонеон

Шаги с лучомТри шага соединены нитью, по которой пробегает огонёкзаливкаконтурмягкийстеклонеон

Финальный призывШирокий блок в светящейся рамке, за текстом дышит сетка точекзаливкаконтурмягкийстеклонеон

Точки волнойПять точек ходят вверх и вниз волной, одна за другойзаливкаконтурмягкийстеклонеон

Пульсирующее кольцоЯдро на месте, от него расходятся два кольца по очередизаливкаконтурмягкийстеклонеон

Полоса неопределённостиДва отрезка бегут по дорожке, когда срок ещё не известензаливкаконтурмягкийстеклонеон

Скелет карточкиМесто под обложку, заголовок, две строки и кнопку, по которым идёт бликзаливкаконтурмягкийстеклонеон

Скелет таблицыШапка и четыре строки по три ячейки, строки светлеют по очередизаливкаконтурмягкийстеклонеон

Спиннер из сегментовДвенадцать чёрточек по кругу гаснут по очереди, как в системном ожиданиизаливкаконтурмягкийстеклонеон

Прыгающие квадратыЧетыре квадрата подпрыгивают по очереди и приседают при приземлениизаливкаконтурмягкийстеклонеон

Песочные часыПесок пересыпается сверху вниз и начинает заново, когда верх опустелзаливкаконтурмягкийстеклонеон

Комета по кругуТочка идёт по кольцу и тянет за собой гаснущий хвостзаливкаконтурмягкийстеклонеон

Блик по блокуЗаглушка любого размера, по которой наискось идёт световая полосазаливкаконтурмягкийстеклонеон

Точка «в сети»Точка с расходящимся кольцом и подписью: видно, что связь живаязаливкаконтурмягкийстеклонеон

СердцебиениеСердце бьётся, а кардиограмма прорисовывается по бледному следузаливкаконтурмягкийстеклонеон

Счётчик, который докручиваетсяЧисло выезжает снизу и докручивается до итога, когда попадает в кадрзаливкаконтурмягкийстеклонеон

Полоса с процентомПодпись, процент и дорожка: заливка вырастает слева до своего значениязаливкаконтурмягкийстеклонеон

Кольцо с процентомДуга добегает до своего значения, число стоит в середине кольцазаливкаконтурмягкийстеклонеон

Шаги с текущимПять точек на нити: пройденные залиты, текущая крупнее и дышит кольцомзаливкаконтурмягкийстеклонеон

Отсчёт цифрамиЧасы, минуты и секунды до срока; двоеточия мигают, цифры тикают самизаливкаконтурмягкийстеклонеон

Полоса силыЧетыре отрезка заполняются один за другим и называют уровень словомзаливкаконтурмягкийстеклонеон

СинхронизацияДве стрелки крутятся по кругу, пока изменения уезжают на серверзаливкаконтурмягкийстеклонеон

Идёт записьМигающая точка, слово «запись» и время от начала дублязаливкаконтурмягкийстеклонеон

Галочка рисуетсяКруг обводится штрихом, следом сама собой прочерчивается галочказаливкаконтурмягкийстеклонеон

Крестик рисуетсяКруг обводится, затем крест прочерчивается двумя штрихами подрядзаливкаконтурмягкийстеклонеон

Сердце с искрамиСердце коротко раздувается, и от него разлетаются шесть искрзаливкаконтурмягкийстеклонеон

Звезда заполняетсяКонтур звезды заливается снизу вверх и в конце коротко подпрыгиваетзаливкаконтурмягкийстеклонеон

Колокольчик качаетсяКолокольчик со счётчиком раскачивается и затихает, потом сновазаливкаконтурмягкийстеклонеон

Стрелка подпрыгиваетПодпись и стрелка вниз, которая коротко подпрыгивает и зовёт листатьзаливкаконтурмягкийстеклонеон

Курсор печатиСтрока появляется рывками, как набранная, и в конце мигает курсорзаливкаконтурмягкийстеклонеон

Подчёркивание кистьюПод одним словом сама собой прочерчивается неровная линия кистьюзаливкаконтурмягкийстеклонеон

Иконка-перевёртышПлитка переворачивается при наведении и с клавиатуры: ссылка становится галочкойзаливкаконтурмягкийстеклонеон

Конфетти из точкиИз галочки веером разлетаются десять бумажек и тают на летузаливкаконтурмягкийстеклонеон

ВходПочта, пароль с глазом, «запомнить», ссылка из письма как второй путьзаливкаконтурмягкийстеклонеон

РегистрацияИмя, почта, пароль с живой шкалой силы и словом-оценкой, согласие с условиямизаливкаконтурмягкийстеклонеон

Сброс пароляОдно поле почты, кнопка и путь назад; конверт качается при наведениизаливкаконтурмягкийстеклонеон

Код подтвержденияШесть клеток с автопереходом, вставка из буфера, кнопка загорается на полном кодезаливкаконтурмягкийстеклонеон

Вход по ссылкеТолько почта и одна кнопка; искра на кнопке при наведениизаливкаконтурмягкийстеклонеон

Вход в два столбцаСлева панель с цитатой и живым градиентом, справа форма с паролемзаливкаконтурмягкийстеклонеон

Страница 404Огромное число плывёт и слегка дышит, под ним путь назад и поискзаливкаконтурмягкийстеклонеон

Что-то сломалосьЭкран ошибки с кнопкой «Повторить», которая честно крутится и отчитываетсязаливкаконтурмягкийстеклонеон

СкороЖивой обратный отсчёт в четырёх плитках и поле «сообщить, когда откроемся»заливкаконтурмягкийстеклонеон

Технические работыДве шестерёнки крутятся навстречу, срок и ссылка на статусзаливкаконтурмягкийстеклонеон

Плашка кукПолоса снизу с двумя честными кнопками; закрывается плавнозаливкаконтурмягкийстеклонеон

Форма контактаИмя, почта, тема и сообщение со счётчиком знаков; кнопка обещает срок ответазаливкаконтурмягкийстеклонеон

Лист ожиданияПочта, номер в очереди и стопка аватаров тех, кто уже записалсязаливкаконтурмягкийстеклонеон

Платный доступТекст уходит в туман, поверх замок и цена; при наведении туман приподнимаетсязаливкаконтурмягкийстеклонеон

Первые шагиЧек-лист первого дня с полосой прогресса; галочки можно ставить самомузаливкаконтурмягкийстеклонеон

КнопкаКнопка с мягким подъёмом при наведении и нажатиемзаливкаконтурмягкийстеклонеон

Кнопка со стрелкойСтрелка уезжает вправо при наведениизаливкаконтурмягкийстеклонеон

Круглая кнопка-значокКруглая кнопка со значком, при наведении поворачиваетсязаливкаконтурмягкийстеклонеон

ТумблерПереключатель с пружинящим бегунком, клавиатура и aria-checkedзаливкаконтурмягкийстеклонеон

ФлажокГалочка рисуется штрихом при включениизаливкаконтурмягкийстеклонеон

Переключатель вариантовТри варианта, точка выбора въезжает пружинойзаливкаконтурмягкийстеклонеон

Сегментный переключательПодсветка скользит к выбранному сегментузаливкаконтурмягкийстеклонеон

Чипы-фильтрыРяд чипов, выбранный подсвечен, наведение приподнимаетзаливкаконтурмягкийстеклонеон

Поле с плавающей подписьюПодпись уезжает вверх при вводе, рамка загорается цветом сайтаконтурмягкийстеклонеон

Строка поискаПоле со значком лупы и подсказкой клавишиконтурмягкийстеклонеон

Поле сообщения со счётчикомМногострочное поле, рамка загорается в фокусеконтурмягкийстеклонеон

Выпадающий списокНативный select со своей стрелкой и рамкойконтурмягкийстеклонеон

Ползунок со значениемЗаполненная дорожка и число, которое следует за ползункомзаливкаконтурмягкийстеклонеон

Подписка одной строкойПоле и кнопка в одной капсулезаливкаконтурмягкийстеклонеон

ТабыПодчёркивание скользит к активной вкладке, стрелки переключаютзаливкаконтурмягкийстеклонеон

Хлебные крошкиПуть по разделам с разделителями и текущей страницейконтурмягкийстеклонеон

ПагинацияСтраницы с активной и стрелкамизаливкаконтурмягкийстеклонеон

Шаги процессаТри шага, пройденные отмечены, текущий подсвечензаливкаконтурмягкийстеклонеон

Меню-пилюлиГоризонтальное меню, активный пункт в пилюлезаливкаконтурмягкийстеклонеон

Выпадающее менюКнопка раскрывает список, закрывается кликом снаружи и Escapeзаливкаконтурмягкийстеклонеон

Кнопка с бликомПолоса света пробегает по кнопке при наведениизаливкаконтурмягкийстеклонеон

Кнопка с бегущей рамкойВокруг кнопки крутится градиентная рамка, на наведении ускоряетсяконтурмягкийстеклонеон

Кнопка с загрузкойНажатие показывает спиннер, потом галочку «Готово», потом возвращаетсязаливкаконтурмягкийстеклонеон

Группа кнопокТри кнопки одним блоком, активная выделеназаливкаконтурмягкийстеклонеон

Плавающая кнопкаКруг с плюсом; при наведении выезжает подпись, плюс поворачиваетсязаливкаконтурмягкийстеклонеон

СердечкоСердце заливается и подпрыгивает по клику, счётчик рядомзаливкаконтурмягкийстеклонеон

Тумблер с подписямиВнутри дорожки слова «вкл» и «выкл», кнопка едет с пружинойзаливкаконтурмягкийстеклонеон

Карточка с флажкомЦелая карточка это флажок: рамка загорается, галочка рисуетсязаливкаконтурмягкийстеклонеон

Карточки-вариантыТри варианта доставки, один выбран; точка выбора едет к активномузаливкаконтурмягкийстеклонеон

Выбор цветаКружки цветов из палитры сайта; выбранный обведён и чуть большезаливкаконтурмягкийстеклонеон

Выбор размераКвадратики S, M, L, XL; один недоступен и перечёркнутзаливкаконтурмягкийстеклонеон

Переключатель темыСолнце уезжает, луна приезжает; дорожка темнеетзаливкаконтурмягкийстеклонеон

Переключатель видаСписок, сетка, карта: подложка едет под выбранный значокзаливкаконтурмягкийстеклонеон

Объёмная кнопкаКнопка стоит на подложке и вдавливается при нажатиизаливкаконтурмягкийстеклонеон

Кнопка с пульсомОт кнопки расходятся кольца, как от сигнала; при наведении замираютзаливкаконтурмягкийстеклонеон

Поле со значкомЗначок поиска слева загорается вместе с рамкой при фокусеконтурмягкийстеклонеон

Поле пароляГлаз показывает и прячет пароль, зачёркиваясь при показеконтурмягкийстеклонеон

Клетки кодаЧетыре клетки, курсор сам переходит дальше, вставка раскладывает цифрыконтурмягкийстеклонеон

Зона загрузки файлаПунктирная область с облаком; при наведении облако приподнимаетсяконтурмягкийстеклонеон

Поле с меткамиМетки с крестиками внутри поля; крестик снимает метку с уменьшениемконтурмягкийстеклонеон

Живой поиск по спискуПечатаете, список сужается; пустой ответ подписан честноконтурмягкийстеклонеон

Текст со счётчикомСчётчик знаков живёт в углу и краснеет у пределаконтурмягкийстеклонеон

Шкала от 0 до 10Одиннадцать клеток оценки; выбранная и все левее закрашиваютсязаливкаконтурмягкийстеклонеон

Дни неделиСемь кружков-флажков; выбранные заливаются с пружинойзаливкаконтурмягкийстеклонеон

Поля с приставкойАдрес с https:// и сумма с валютой; приставка часть рамкиконтурмягкийстеклонеон

Поле с проверкойПочта: галочка появляется, когда адрес похож на настоящий, крест, когда нетконтурмягкийстеклонеон

Шапка сайтаЛоготип, ссылки, кнопка и бургер, который раскрывает меню на узком экранезаливкаконтурмягкийстеклонеон

МегаменюПункт «Продукт» раскрывает панель из трёх колонок при наведении и фокусезаливкаконтурмягкийстеклонеон

Боковое менюПункты со значками, активный с полоской слева, счётчик у входящихзаливкаконтурмягкийстеклонеон

Нижние вкладкиЧетыре вкладки как в приложении; активная поднимает значок и подписаназаливкаконтурмягкийстеклонеон

Оглавление«На этой странице»: список якорей, активный с меткой, при наведении сдвигзаливкаконтурмягкийстеклонеон

НаверхКруглая кнопка со стрелкой, которая подпрыгивает при наведениизаливкаконтурмягкийстеклонеон

Подвал в колонкиЧетыре колонки ссылок, подписка и строка с годом; ссылки подчёркиваются слева направозаливкаконтурмягкийстеклонеон

Ссылки с подчёркиваниемПодчёркивание растёт из центра при наведении, у активной стоитзаливкаконтурмягкийстеклонеон

Значок-меткаМаленькая метка статуса с точкойзаливкаконтурмягкийстеклонеон

Уведомление в текстеПолоска с заголовком, текстом и кнопкой закрытьзаливкаконтурмягкийстеклонеон

СпиннерКольцо загрузки с подписьюконтурмягкийнеон

Три точкиТри точки прыгают по очередизаливкамягкийнеон

Полоса загрузкиПолоса, по которой бежит блик, пока идёт загрузказаливкамягкийнеон

Скелет карточкиЗаглушка карточки с бегущим бликом, пока грузятся данныемягкийстекло

ТостКнопка показывает всплывающее сообщение снизу на две секундызаливкаконтурмягкийстеклонеон

Полоса прогрессаЗаполнение до значения с подписью процентазаливкаконтурмягкийстеклонеон

Кольцо прогрессаКруг заполняется до процента, число в центрезаливкамягкийнеон

Цифра с подписьюБольшое число, подпись и стрелка ростаконтурмягкийстеклонеон

Звёзды рейтингаПять звёзд, выбор по клику, подсветка при наведениизаливкаконтурнеон

Счётчик количестваМинус, число, плюс: как в корзинезаливкаконтурмягкийстеклонеон

Стопка аватаровКружки участников внахлёст и подпись «+ ещё»заливкаконтурстеклонеон

Карточка преимуществаЗначок, заголовок, текст; поднимается при наведенииконтурмягкийстеклонеон

ОтзывЦитата, имя, должность и звёздыконтурмягкийстеклонеон

Карточка тарифаНазвание, цена, три пункта и кнопкаконтурмягкийстеклонеон

Тумблер «месяц или год»Переключатель периода меняет цены на карточкахзаливкаконтурмягкийстеклонеон

АккордеонВопросы раскрываются по одному, стрелка поворачиваетсяконтурмягкийстеклонеон

Лента событийВертикальная линия с точками и датамизаливкаконтурмягкийстеклонеон

Призыв в рамкеЗаголовок, строка и кнопка в одной плашкезаливкаконтурмягкийстеклонеон

КлавишаПодсказка сочетания клавиш, нажимается при наведенииконтурмягкийстеклонеон

Поле с копированиемКод или ссылка и кнопка, которая копирует и подтверждаетконтурмягкийстеклонеон

Подсказка при наведенииПодсказка всплывает над словом при наведении и фокусезаливкастеклонеон

Модальное окноКнопка открывает диалог с затемнением, закрывается кнопкой, фоном и Escapeконтурмягкийстеклонеон

Плашка сверхуСтрока объявления с ссылкой и кнопкой закрытьзаливкаконтурмягкийстеклонеон

Пустое состояниеПунктирная рамка, значок папки и одно действие; папка приоткрывается при наведениизаливкаконтурмягкийстеклонеон

Шаги загрузкиЧетыре строки зажигаются по очереди: точка, спиннер, галочка, и так по кругузаливкаконтурмягкийстеклонеон

Скелет спискаТри строки с кружком и полосками, по которым идёт бликконтурмягкийстеклонеон

Закрываемое сообщениеПолоса с иконкой и крестиком; закрывается, схлопываясь вверхзаливкаконтурмягкийстеклонеон

Статус службЧетыре службы с точками: три в норме, одна замедлена и пульсируетзаливкаконтурмягкийстеклонеон

Кто-то печатаетПузырь чата с тремя точками, которые подпрыгивают по очередизаливкаконтурмягкийстеклонеон

Загрузка файлаСтрока файла с полосой, которая доезжает до 72 % и показывает скоростьзаливкаконтурмягкийстеклонеон

УспехКруг раскрывается, галочка рисуется штрихом, подпись всплываетзаливкаконтурмягкийстеклонеон

Значок достиженияМедаль с искрами, которые кружат вокруг, при наведении медаль качаетсязаливкаконтурмягкийстеклонеон

Плитки показателейТри числа с подписью и дельтой; стрелка вверх или вниз, при наведении плитка приподнимаетсязаливкаконтурмягкийстеклонеон

Карточка с графикомЧисло и тонкая линия за 30 дней; линия прорисовывается при появлениизаливкаконтурмягкийстеклонеон

СтолбикиСемь столбиков растут снизу по очереди; наведение показывает значениезаливкаконтурмягкийстеклонеон

Кольцо с долямиТри доли в кольце и число в центре; легенда подсвечивается при наведениизаливкаконтурмягкийстеклонеон

Таблица с сортировкойКлик по заголовку сортирует строки, стрелка показывает направлениезаливкаконтурмягкийстеклонеон

Таблица лидеровПять мест с медалями у первых трёх и полосой очковзаливкаконтурмягкийстеклонеон

Мини-календарьМесяц сеткой, сегодня обведено, выбранный промежуток залитзаливкаконтурмягкийстеклонеон

Сравнение полосамиЧетыре горизонтальные полосы с подписью и процентом; растут слева при появлениизаливкаконтурмягкийстеклонеон

Карточка товараОбложка с меткой, название, цена и кнопка; обложка приближается при наведениизаливкаконтурмягкийстеклонеон

Карточка профиляАватар с инициалами на градиентной шапке, роль, три цифры и кнопказаливкаконтурмягкийстеклонеон

Карточка статьиОбложка, рубрика, заголовок с подчёркиванием при наведении, автор и время чтениязаливкаконтурмягкийстеклонеон

ЦитатаБольшая кавычка цветом сайта, текст и автор с полоской слевазаливкаконтурмягкийстеклонеон

Ряд логотиповПять названий клиентов приглушены и оживают цветом по одному при наведениизаливкаконтурмягкийстеклонеон

Бенто-сеткаЧетыре плитки разного размера; при наведении по плитке идёт свет за курсоромзаливкаконтурмягкийстеклонеон

Запись в журнале измененийВерсия, дата, метки «новое» и «исправлено», список с точками цвета сайтазаливкаконтурмягкийстеклонеон

Обложка видеоКадр 16:9 с кнопкой воспроизведения, от которой расходится кольцозаливкаконтурмягкийстеклонеон

Пузыри чатаТри сообщения: чужие слева, своё справа цветом сайта, время под нимизаливкаконтурмягкийстеклонеон

Строка уведомленияЗначок, текст с выделенным именем, время и точка непрочитанногозаливкаконтурмягкийстеклонеон

Таблица тарифовТри колонки с ценами и галочками, средняя выделена и чуть вышезаливкаконтурмягкийстеклонеон

Карточка-перевёртышКлик переворачивает карточку в 3D: спереди факт, сзади объяснениезаливкаконтурмягкийстеклонеон

КарусельТри слайда, стрелки и точки; лента едет с пружинойзаливкаконтурмягкийстеклонеон

Выдвижная панельКнопка выдвигает панель справа с затемнением; закрывается крестиком, фоном и Escapeконтурмягкийстеклонеон

Всплывающая карточкаНаведите на имя: всплывает карточка с аватаром, ролью и кнопкойконтурмягкийстеклонеон

Нижняя шторкаШторка выезжает снизу с ручкой, как на телефоне; фон и Escape закрываютконтурмягкийстеклонеон

Командная строкаCtrl K по-домашнему: окно с поиском, список сужается по мере вводаконтурмягкийстеклонеон

Разделитель с подписьюЛиния с коротким словом посерединеконтурмягкийстеклонеон

Облако теговСсылки-теги разного веса, при наведении подсвечиваютсязаливкаконтурмягкийстеклонеон

Аватар с индикаторомКружок с инициалами и точкой «в сети», которая мягко пульсируетзаливкаконтурстеклонеон

Обратный отсчётДни, часы, минуты и секунды до даты, тикают самизаливкаконтурмягкийстеклонеон

И ещё пятнадцать открытых библиотек внутри

Завезены под разрешающими лицензиями, очищены от скриптов и внешних адресов, стили заперты под свой элемент.

1 104 Кнопки865 Загрузчики622 Карточки248 Тумблеры215 Поля169 Флажки131 Формы103 Узоры96 Переключатели49 Подсказки38 input37 button35 motion30 dropdown27 footers25 menus23 menu23 select23 tooltip22 Уведомления22 tabs21 footer21 pagination20 card20 spinners19 indicator19 contact18 avatar18 breadcrumbs18 stats17 badge17 hero17 radio17 steps16 accordions16 badges16 vertical-menu16 testimonials16 content16 feature15 progress15 pricing15 alerts14 mask14 tab14 table14 timeline14 cta14 loader14 Текст13 aura13 divider13 range13 textarea13 blog-cards12 checkbox12 collapse12 skeleton12 dividers12 modals12 selects12 textareas12 toasts12 announcements11 alert11 fab11 file-input11 validator11 tables11 features10 accordion10 link10 modal10 navbar10 theme-controller10 toast10 toggle10 button-groups10 empty-states10 grids10 progress-bars10 contact-forms10 empty-content10 avatars9 carousel9 sign-in-and-registration8 rating8 stack8 details-list8 media8 quantity-inputs8 ctas8 feature-grids8 headers8 product-cards8 faq8 sidebar8 header7 countdown7 dock7 kbd7 list7 loading7 stat7 portfolio7 404-pages7 email-templates7 Раскладка6 join6 label6 megamenu6 mockup-code6 otp6 swap6 timelines6 carts6 faqs6 polls6 team-sections6 blog6 cookies6 button-group6 ecommerce6 gallery6 statistic6 step6 team6 testimonial6 call-to-action5 chat5 drawer5 fieldset5 radial-progress5 status5 text-rotate5 radio-groups5 range-inputs5 notification5 404-5005 heroes5 login4 file-uploaders4 filters4 side-menu4 banners4 newsletter-signup4 product-collections4 sections4 teams4 media-object4 blog-list4 forgot-password4 logos4 register4 statistics4 verification3 filter3 hover-3d3 skip-links3 logo-clouds3 heros3 breadcrumb3 form-layout2 diff2 hover-gallery2 mockup-phone2 mockup-window2 analytics-dashboard2 support-inbox2 empty-state2 privacy-terms1 calendar1 animate-duration-delay1 remove-number-input-spinners1 storefront1 navbars

Источники:Uiverse · MIT · 3 348daisyUI · MIT · 580HyperUI · MIT · 518Meraki UI · MIT · 194Sailboat UI · MIT · 133Tailblocks · MIT · 116Whirl · MIT · 96Kutty · MIT · 68CSSFX · MIT · 45CSShake · MIT · 35Loaders.css · MIT · 29Hamburgers · MIT · 25Epic Spinners · MIT · 20Three Dots · MIT · 20SpinKit · MIT · 12

Поставь деталь в свою страницу

В билдере: открой раздел, нажми «Компоненты» или «Библиотека», выбери карточку, нажми «Вставить». Снятие возвращает документ байт в байт.