Repolode
Enviar
mickadesign

mickadesign/fluid-functionalism

Un registro de componentes shadcn/ui con componentes de interfaz refinados, transiciones elásticas al pasar el cursor y variantes para Radix o Base UI.

Ver en GitHubSitio web
Estrellas
1,139
Forks
55
Issues abiertos
19
Último commit
ayer

¿Qué es?

Fluid Functionalism es un registro de shadcn/ui con componentes de interfaz, sistemas de interacción compartidos y bloques compuestos. Sus transiciones se basan en resortes en lugar de duraciones fijas, y cada movimiento está pensado para que sea más fácil seguir los cambios de estado. Un único resaltado al pasar el cursor se desliza entre los elementos de una lista, y los cambios de grosor de fuente no desplazan el contenido cercano.

Los componentes que dependen de una primitiva están disponibles en dos variantes, Radix y Base UI, ambas con la misma API. La instalación se hace con shadcn CLI, por nombre de registro o URL, y las dependencias se resuelven automáticamente. La biblioteca también ofrece un comando de inicio que crea una app de Next.js con los componentes ya instalados, además de un proveedor de iconos configurable que usa Lucide de forma predeterminada, pero admite otros conjuntos de iconos.

El proyecto abarca una amplia variedad de componentes, como Button, Dialog, Combobox, Calendar, Sidebar, ColorPicker y ChatMessage, además de sistemas como ajustes preestablecidos de movimiento con resortes y escalas tipográficas. El sitio de documentación también ofrece contenido en Markdown y formato llms.txt para agentes de programación con IA.

Funciones clave

  • 01Se instala con shadcn CLI por nombre de registro o URL.
  • 02Las variantes para Radix y Base UI de los componentes basados en primitivas comparten una misma API.
  • 03Transiciones basadas en resortes, con un resaltado compartido que se desliza entre los elementos de una lista al pasar el cursor.
  • 04La configuración de la fuente variable Inter evita que los cambios en el grosor del texto desplacen el contenido.
  • 05Los espacios para iconos usan Lucide de forma predeterminada y se pueden cambiar por otros conjuntos de iconos.

Casos de uso

  • Crear una app de Next.js o React con shadcn/ui que necesite efectos refinados al pasar el cursor y transiciones.
  • Añadir una interfaz de chat con un compositor, burbujas de mensajes e indicadores de escritura.
  • Crear estructuras de app con una barra lateral redimensionable, un menú de comandos o un diálogo de configuración.
  • Usar un proyecto que ya funcione con Base UI o Radix sin cambiar de primitivas.

Inicio rápido

  1. 1

    Crea una nueva aplicación Next.js con todos los componentes instalados

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

    Añade el registro Fluid Functionalism a un proyecto existente

    npx shadcn@latest registry add @fluid
  3. 3

    Instala un componente usando su nombre en el registro

    npx shadcn@latest add @fluid/button

Antes de usarlo

  • Los componentes se instalan en el proyecto como código fuente de shadcn/ui, no como un paquete con versiones.
  • Al usar --overwrite, se reemplazan los archivos estándar de shadcn existentes que tengan el mismo nombre.
  • Las animaciones del grosor de fuente requieren que Inter se cargue con los ejes wght y opsz.

En colecciones

Frameworks frontend y componentes de interfaz

Temas

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

Preguntas frecuentes

¿Qué es fluid-functionalism?
Un registro de componentes shadcn/ui con componentes de interfaz refinados, transiciones elásticas al pasar el cursor y variantes para Radix o Base UI. Fluid Functionalism es un registro de shadcn/ui con componentes de interfaz, sistemas de interacción compartidos y bloques compuestos. Sus transiciones se basan en resortes en lugar de duraciones fijas, y cada movimiento está pensado para que sea más fácil seguir los cambios de estado. Un único resaltado al pasar el cursor se desliza entre los elementos de una lista, y los cambios de grosor de fuente no desplazan el contenido cercano.
¿fluid-functionalism es gratuito? ¿Qué licencia tiene?
fluid-functionalism es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿fluid-functionalism sigue mantenido?
Mantenimiento activo. El último commit de fluid-functionalism fue el 6 nov 2026.
¿Para qué puedo usar fluid-functionalism?
Crear una app de Next.js o React con shadcn/ui que necesite efectos refinados al pasar el cursor y transiciones. Añadir una interfaz de chat con un compositor, burbujas de mensajes e indicadores de escritura. Crear estructuras de app con una barra lateral redimensionable, un menú de comandos o un diálogo de configuración. Usar un proyecto que ya funcione con Base UI o Radix sin cambiar de primitivas.
¿Cómo se instala fluid-functionalism?
Crea una nueva aplicación Next.js con todos los componentes instalados: npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json Añade el registro Fluid Functionalism a un proyecto existente: npx shadcn@latest registry add @fluid Instala un componente usando su nombre en el registro: npx shadcn@latest add @fluid/button
¿Dónde consigo fluid-functionalism?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/mickadesign/fluid-functionalism

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados