Headless UI 가 핫하다는데.. Radix UI vs shadcn/ui 어떤 것을 사용할까?

 

To. 프론트엔드 팀.
비즈니스 방향성 변동으로 기획이 늦어지고 있습니다.
하지만 디자인 시스템은 미리 만들어 두셨으면 좋겠어요.
그런데 아직 브랜드 컬러랑 방향성 아무것도 정해져 있지는 않은 상황이에요.

디자인 없이 UI 디자인 시스템 구축을요..?
......
하지만 우리는 K-직장인
월급을 받고 있다면 무엇이든 해내야만 하지


그러던 중 요즘 핫하게 떠오르는 키워드가 머릿속을 스쳤다.



"Headless UI"

Headless UI 란?

스타일이 없는 대표적인 UI 컴포넌트 라이브러리
Headless UI는 스타일이 입혀지지 않은 형태의 다양한 UI 컴포넌트들을 제공하는 라이브러리

Headless UI는 대표적인 스타일링 라이브러리 중 하나인 Tailwind CSS와 함께 사용할 수 있도록 개발되었습니다. 참고로 Headless UI와 Tailwind CSS 모두 Tailwind Labs에서 개발한 라이브러리입니다.

 

스타일은 없지만 체크박스, 라디오 버튼 등의

UI 컴포넌트들이 수행해야 하는 기본 기능들이 탑재된 UI 라이브러리라니

지금 우리 상황에 딱 맞는 도구라는 생각이 들어서 바로 도입하기로 결정

 

 

Headless UI의 선두 주자가 Radix UI 라는 것이 있었고,

Radix UI 에 tailwind css 를 결합한 shadcn/ui 도 요즘 핫하다고 했다.

 

둘 중에 어떤 것을 선택해야 할지 또 리서치를 해 보니

 

Radix UI	Shadcn/ui
커스텀 UI를 구축하기 위한 low-level 라이브러리	미리 스타일이 지정된 컴포넌트
접근성에 중점	현대적인 디자인
스타일링이 거의 되어 있지 않아 디자인 유연성이 좋음	내장된 디자인 시스템으로 구동

 

이런 차이점이 있기 때문에

주로 회사 내부 디자인이 없는 경우에는 shadcn/ui 를 쓰는 것이 좋지만

우리는 추후 회사 내부 디자인이 구축될 예정이라 디자인 커스텀이 필요하기 때문에 Radix UI 가 더 적합하겠다는 판단!

 

Radix UI를 커스텀하기 위해서는 CSS 도 필요한데 

Radix UI 공식문서에 따르면

overiding styles하는 방법에

tailwind css 에 대한 이야기도 있었다.

 

반응형 작업도 필요한 사이트 이기 때문에 여러모로

tailwind css 를 사용하기로 결정하고 간단하게 공식문서에 따라 세팅을 완료했다.

 

 

기본 progress 바 컴포넌트 예제는 다음과 같다.

 

	<Progress value={20} color="indigo" />
	<Progress value={40} color="cyan" />
	<Progress value={60} color="orange" />
	<Progress value={80} color="crimson" />

 

이렇게 Bootstrap 이나 MUI 처럼 버튼 컴포넌트에 color 혹은 variant 값을 주게 되면

 

 

이런 형태로 결과물이 나오는 것이 일반적인 사용법이고,

 

여기서 tailwind css 로 스타일을 오버라이딩하고싶다면

 

 

"use client";

import React, { useEffect } from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import { getRandomArbitrary } from "@/utils/math";

const Progress = () => {
  const [progress, setProgress] = React.useState(60);

  useEffect(() => {
    let timerId: ReturnType<typeof setInterval>;

    timerId = setInterval(() => {
      const p = Math.ceil(getRandomArbitrary(0, 100) / 10) * 10;
      setProgress(p);
    }, 1000);

    return () => {
      if (timerId) {
        clearInterval(timerId);
      }
    };
  }, []);

  return (
    <ProgressPrimitive.Root
      value={progress}
      className="h-3 w-full overflow-hidden rounded-full bg-white dark:bg-gray-900"
    >
      <ProgressPrimitive.Indicator
        style={{ width: `${progress}%` }}
        className="h-full bg-blue-500 duration-300 ease-in-out dark:bg-white"
      />
    </ProgressPrimitive.Root>
  );
};

export { Progress };

 

이렇게 radix-ui 에서 원하는 컴포넌트를 import 한 후,

일반적인 tailwind 를 쓰듯이 className 에 property 들을 할당하면

원하는 대로 구현이 끝! 

 

 

 

 

 

 

 

 

 

 

 

참고: 

 

https://www.swhabitation.com/blogs/what-is-the-difference-between-radix-ui-and-shadcn

Radix UI vs. ShadCN: Key Differences Explained

https://www.frontoverflow.com/magazine/2/%EC%8A%A4%ED%83%80%EC%9D%BC%EC%9D%B4%20%EC%97%86%EB%8A%94%20UI%20%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EA%B0%80%20%EC%9E%88%EB%8B%A4%3F