Repolode
Enviar
mickadesign

mickadesign/fluid-functionalism

Um registry de componentes shadcn/ui com componentes refinados, transições de hover com efeito de mola e versões Radix ou Base UI.

Ver no GitHubSite
Estrelas
1,139
Forks
55
Issues abertas
19
Último commit
anteontem

O que é?

Fluid Functionalism é um registry shadcn/ui de componentes de interface, sistemas de interação compartilhados e blocos compostos. Suas transições são baseadas em molas, não em durações fixas, e cada movimento busca tornar as mudanças de estado mais fáceis de acompanhar. Um único destaque de hover desliza entre os itens de uma lista, e as mudanças no peso da fonte acontecem sem deslocar o layout ao redor.

Os componentes que dependem de um primitivo estão disponíveis em duas versões, Radix e Base UI, com a mesma API em ambas. A instalação é feita pelo shadcn CLI, pelo nome do registry ou por URL, e as dependências são resolvidas automaticamente. A biblioteca também oferece um comando de inicialização que cria um app Next.js com os componentes pré-instalados e um provider de ícones configurável, que usa Lucide por padrão, mas aceita outros conjuntos de ícones.

O projeto reúne uma ampla variedade de componentes, como Button, Dialog, Combobox, Calendar, Sidebar, ColorPicker e ChatMessage, além de sistemas como presets de movimento com mola e escalas tipográficas. O site de documentação também oferece conteúdo em Markdown e llms.txt para agentes de programação com IA.

Recursos principais

  • 01Instalação pelo shadcn CLI usando o nome do registry ou uma URL.
  • 02As versões Radix e Base UI dos componentes baseados em primitivos compartilham a mesma API.
  • 03Transições baseadas em molas, com um destaque de hover compartilhado que desliza entre os itens da lista.
  • 04A configuração da fonte variável Inter evita que mudanças no peso do texto desloquem o layout.
  • 05Os espaços para ícones usam Lucide por padrão e podem ser substituídos por outros conjuntos de ícones.

Casos de uso

  • Criar um app Next.js ou React com shadcn/ui que precise de comportamentos refinados de hover e transição.
  • Adicionar uma interface de chat com campo de composição, balões de mensagem e indicadores de digitação.
  • Criar estruturas de app com uma sidebar redimensionável, menu de comandos ou diálogo de configurações.
  • Usar o projeto em um app que já utiliza Base UI ou Radix, sem trocar os primitivos.

Início rápido

  1. 1

    Crie um novo app Next.js com todos os componentes instalados

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

    Adicione o registro Fluid Functionalism a um projeto existente

    npx shadcn@latest registry add @fluid
  3. 3

    Instale um componente pelo nome no registro

    npx shadcn@latest add @fluid/button

Antes de usar

  • Os componentes são instalados no projeto como código-fonte do shadcn/ui, e não como um pacote versionado.
  • Ao usar --overwrite, os arquivos padrão existentes do shadcn com os mesmos nomes são substituídos.
  • As animações de peso da fonte exigem que o Inter seja carregado com os eixos wght e opsz.

Em coleções

Frameworks frontend e componentes de interface

Tópicos

#react#shadcn-ui#tailwind-css#ui-components#animation#design-system#typescript

Perguntas frequentes

O que é fluid-functionalism?
Um registry de componentes shadcn/ui com componentes refinados, transições de hover com efeito de mola e versões Radix ou Base UI. Fluid Functionalism é um registry shadcn/ui de componentes de interface, sistemas de interação compartilhados e blocos compostos. Suas transições são baseadas em molas, não em durações fixas, e cada movimento busca tornar as mudanças de estado mais fáceis de acompanhar. Um único destaque de hover desliza entre os itens de uma lista, e as mudanças no peso da fonte acontecem sem deslocar o layout ao redor.
fluid-functionalism é gratuito? Qual é a licença?
fluid-functionalism é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
fluid-functionalism ainda é mantido?
Manutenção ativa. O último commit de fluid-functionalism foi em 6 de nov. de 2026.
Para que posso usar fluid-functionalism?
Criar um app Next.js ou React com shadcn/ui que precise de comportamentos refinados de hover e transição. Adicionar uma interface de chat com campo de composição, balões de mensagem e indicadores de digitação. Criar estruturas de app com uma sidebar redimensionável, menu de comandos ou diálogo de configurações. Usar o projeto em um app que já utiliza Base UI ou Radix, sem trocar os primitivos.
Como instalar fluid-functionalism?
Crie um novo app Next.js com todos os componentes instalados: npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json Adicione o registro Fluid Functionalism a um projeto existente: npx shadcn@latest registry add @fluid Instale um componente pelo nome no registro: npx shadcn@latest add @fluid/button
Onde consigo fluid-functionalism?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/mickadesign/fluid-functionalism

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados