mickadesign/fluid-functionalism

Что это?

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

• 01Установка через shadcn CLI по имени реестра или URL.
• 02Варианты компонентов на базе примитивов Radix и Base UI используют общий API.
• 03Пружинные переходы и общая подсветка при наведении, плавно перемещающаяся между элементами списка.
• 04Настройка переменного шрифта Inter позволяет менять насыщенность текста без сдвига разметки.
• 05По умолчанию в слотах для иконок используется Lucide, но его можно заменить другим набором иконок.

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

• Разработка приложения на Next.js или React с shadcn/ui, которому нужны тщательно проработанные эффекты при наведении и переходы.
• Добавление чат-интерфейса с полем ввода, пузырями сообщений и индикаторами набора ответа.
• Создание каркаса приложения с изменяемой по ширине боковой панелью, меню команд или диалогом настроек.
• Использование проекта в приложении, где уже задействованы Base UI или Radix, без замены примитивов.

Быстрый старт

1. 1

   Создайте новое приложение Next.js со всеми установленными компонентами

   npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json
2. 2

   Добавьте реестр Fluid Functionalism в существующий проект

   npx shadcn@latest registry add @fluid
3. 3

   Установите компонент, указав его имя в реестре

   npx shadcn@latest add @fluid/button

Что важно знать

• !Компоненты устанавливаются в проект как исходный код shadcn/ui, а не как пакет с версиями.
• !При использовании --overwrite существующие стандартные файлы shadcn с такими же именами заменяются.
• !Для анимации толщины шрифта необходимо загрузить Inter с осями wght и opsz.

В подборках

Темы

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

Что такое fluid-functionalism?

Реестр компонентов shadcn/ui с тщательно проработанными UI-компонентами, пружинящими переходами при наведении и вариантами на Radix или Base UI. Fluid Functionalism — это реестр shadcn/ui с UI-компонентами, общими системами взаимодействия и составными блоками. В основе переходов лежат пружины, а не фиксированная длительность, и каждое движение помогает лучше отслеживать смену состояния. Единая подсветка при наведении плавно перемещается между элементами списка, а изменение насыщенности шрифта не сдвигает окружающую разметку.

fluid-functionalism можно использовать бесплатно? Какая у него лицензия?

fluid-functionalism распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

fluid-functionalism всё ещё поддерживается?

Активно поддерживается. Последний коммит в fluid-functionalism — 6 нояб. 2026 г..

Для чего можно использовать fluid-functionalism?

Разработка приложения на Next.js или React с shadcn/ui, которому нужны тщательно проработанные эффекты при наведении и переходы. Добавление чат-интерфейса с полем ввода, пузырями сообщений и индикаторами набора ответа. Создание каркаса приложения с изменяемой по ширине боковой панелью, меню команд или диалогом настроек. Использование проекта в приложении, где уже задействованы Base UI или Radix, без замены примитивов.

Как установить fluid-functionalism?

Создайте новое приложение Next.js со всеми установленными компонентами: npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json Добавьте реестр Fluid Functionalism в существующий проект: npx shadcn@latest registry add @fluid Установите компонент, указав его имя в реестре: npx shadcn@latest add @fluid/button

Где скачать fluid-functionalism?

Исходный код и инструкции по установке — на GitHub: https://github.com/mickadesign/fluid-functionalism