mickadesign/fluid-functionalism

어떤 프로젝트인가요?

핵심 기능

• 01shadcn CLI에서 레지스트리 이름이나 URL을 지정해 설치할 수 있습니다.
• 02프리미티브 기반 컴포넌트의 Radix 및 Base UI 버전은 동일한 API를 공유합니다.
• 03스프링 기반 전환 효과를 제공하며, 공유 호버 하이라이트가 목록 항목 사이를 부드럽게 이동합니다.
• 04Inter variable font 설정으로 텍스트 두께가 바뀌어도 레이아웃이 밀리지 않습니다.
• 05아이콘 슬롯은 기본적으로 Lucide를 사용하며, 다른 아이콘 세트로 바꿀 수 있습니다.

활용 사례

• 다듬어진 호버 및 전환 효과가 필요한 shadcn/ui 기반 Next.js 또는 React 앱을 만들 때.
• composer, 메시지 버블, thinking indicator가 있는 채팅 인터페이스를 추가할 때.
• 크기 조절이 가능한 사이드바, 명령 메뉴 또는 설정 다이얼로그를 갖춘 앱 셸을 만들 때.
• 프리미티브를 전환하지 않고 기존 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 파일이 대체됩니다.
• !폰트 두께 애니메이션을 사용하려면 wght 및 opsz 축을 모두 포함해 Inter를 로드해야 합니다.

포함된 컬렉션

토픽

자주 묻는 질문

fluid-functionalism은(는) 무엇인가요?

다듬어진 UI 컴포넌트, 스프링 기반 호버 전환 효과, Radix 및 Base UI 버전을 제공하는 shadcn/ui 컴포넌트 레지스트리입니다. Fluid Functionalism은 UI 컴포넌트, 공유 인터랙션 시스템, 조합형 블록을 제공하는 shadcn/ui 레지스트리입니다. 전환 효과는 고정된 지속 시간이 아니라 스프링을 기반으로 하며, 각 모션은 상태 변화를 더 쉽게 파악할 수 있도록 설계되었습니다. 목록의 항목 사이를 호버 하이라이트 하나가 부드럽게 이동하고, 글꼴 두께가 바뀌어도 주변 레이아웃은 밀리지 않습니다.

fluid-functionalism은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

fluid-functionalism은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

fluid-functionalism은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. fluid-functionalism의 마지막 커밋은 2026년 11월 6일입니다.

fluid-functionalism은(는) 어디에 사용할 수 있나요?

다듬어진 호버 및 전환 효과가 필요한 shadcn/ui 기반 Next.js 또는 React 앱을 만들 때. composer, 메시지 버블, thinking indicator가 있는 채팅 인터페이스를 추가할 때. 크기 조절이 가능한 사이드바, 명령 메뉴 또는 설정 다이얼로그를 갖춘 앱 셸을 만들 때. 프리미티브를 전환하지 않고 기존 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