Repolode
Предложить
ui-layouts

ui-layouts/uilayouts

Библиотека компонентов React и Tailwind CSS с анимированными элементами интерфейса, эффектами и готовыми блоками на Framer Motion, распространяемая в стиле shadcn.

Открыть на GitHubСайт
Звёзды
3,808
Форки
228
Открытые issues
10
Последний коммит
2 месяца назад

Что это?

UI Layouts — библиотека компонентов с открытым исходным кодом для создания сайтов с выразительными анимированными интерфейсами. В неё входят эффекты вроде блёсток, подсветки, следов за курсором и ряби на изображениях, а также стандартные элементы управления: аккордеоны, выдвижные панели, модальные окна, карусели, слайдеры, загрузка файлов и поля для пароля.

Большинство компонентов написано на TypeScript для React и стилизовано с помощью Tailwind CSS; многие используют Framer Motion для анимации. Для настройки нужно установить Tailwind, пакет motion и clsx вместе с tailwind-merge, а также добавить небольшую функцию-помощник `cn` и хук для медиазапросов. В проекте также есть раздел Labs с экспериментальными компонентами.

Библиотека предназначена для разработчиков и дизайнеров, которым нужны тщательно проработанные элементы интерфейса с обилием анимации, но которые не хотят создавать эффекты с нуля.

Ключевые возможности

  • 01Компоненты с анимированными эффектами: блёстками, подсветкой, следом за курсором и рябью на изображении.
  • 02Стандартные элементы управления: аккордеон, выдвижная панель, модальное окно, карусель, ползунок диапазона и загрузка файлов.
  • 03Создано для React с использованием TypeScript и стилизовано с помощью Tailwind CSS.
  • 04Анимации реализованы с помощью Framer Motion (пакет motion).
  • 05Готовые блоки и экспериментальный раздел Labs.

Сценарии использования

  • Добавление анимированных главных секций или визуальных эффектов на маркетинговую целевую страницу.
  • Создание интерактивных элементов управления, например загрузки файлов, слайдеров или полей для ввода тегов, в приложении на React.
  • Быстрое прототипирование креативных портфолио-сайтов с компонентами, насыщенными анимацией.

Темы

#react#tailwindcss#component-library#framer-motion#animation#typescript#ui-components#accertinity#accordion-component#animated-tabs

Частые вопросы

Что такое uilayouts?
Библиотека компонентов React и Tailwind CSS с анимированными элементами интерфейса, эффектами и готовыми блоками на Framer Motion, распространяемая в стиле shadcn. UI Layouts — библиотека компонентов с открытым исходным кодом для создания сайтов с выразительными анимированными интерфейсами. В неё входят эффекты вроде блёсток, подсветки, следов за курсором и ряби на изображениях, а также стандартные элементы управления: аккордеоны, выдвижные панели, модальные окна, карусели, слайдеры, загрузка файлов и поля для пароля.
uilayouts можно использовать бесплатно? Какая у него лицензия?
uilayouts распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
uilayouts всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в uilayouts — 23 авг. 2026 г..
Для чего можно использовать uilayouts?
Добавление анимированных главных секций или визуальных эффектов на маркетинговую целевую страницу. Создание интерактивных элементов управления, например загрузки файлов, слайдеров или полей для ввода тегов, в приложении на React. Быстрое прототипирование креативных портфолио-сайтов с компонентами, насыщенными анимацией.
Где скачать uilayouts?
Исходный код и инструкции по установке — на GitHub: https://github.com/ui-layouts/uilayouts

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты