shadcn은 npm 패키지로 배포되지 않고, CLI를 통해 컴포넌트 소스를 프로젝트에 포함하는 방식으로 제공하고있다.
이 방법을 채택하게 된 이유는 코드에 대한 소유권과 제어권을 사용자에게 부여하여, 사용자가 컴포넌트의 빌드 및 스타일을 직접 결정할 수 있도록하기 위함이라고 한다. npm 패키지로 컴포넌트들을 배포할 때 단점 중 하나는 스타일과 구현이 결합이 되어있다라는 것이라고 한다.
순수하게 표현을 위한 UI 컴포넌트들을 제외하고, 다른 UI 컴포넌트들은 사용자와 인터렉션을 해야한다. 최신 프레임워크를 사용하면 이러한 컴포넌트를 표면적으로 구현하는 것은 쉽지만, W3C 사양에 맞게 정확하게 구현하는 것은 어렵다.
프론트엔드 팀에서 인터렉션이 있는 커스텀 컴포넌트 개발시에 접근성 가이드를 고려하는 것은 어렵다. 이를 완화하는 방법은 이미 이러한 동작을 구현한 스타일이 없는 기본 컴포넌트 세트를 개발하여 모든 프로젝트에 사용하는 것이다.
이렇게 동작을 캡슐화하고 있지만 스타일이 없는 재사용 가능한 컴포넌트를 Headless UI 컴포넌트라고 부른다고 한다.
shadcn은 컴포넌트의 디자인과 구현은 분리되어야 한다는 핵심 원칙을 기반으로 하고 있다
따라서 shadcn의 모든 컴포넌트 들은
으로 구성되어 있다.
구조와 동작 계층에서는 컴포넌트가 headless 형태로 구현됩니다. 이는 컴포넌트의 구조적 구성과 핵심 동작이 캡슐화된다는 것을 의미합니다.
여러 헤드리스 라이브러리도 이용한다.