shadcn/ui

ShadCN UI를 공부하게 된 이유 > 현재 인턴을 준비하면서 ShadCN UI를 실무에서 사용한다고 들었고, 이에 대한 이해를 높이기 위해 직접 학습을 진행하고 있다. ShadCN UI는 Next.js 및 Tailwind CSS와 잘 어우러지는 UI 컴포넌트 라이브

ShadCN 설치 및 설정 방법 >- ShadCN이란? ShadCN은 Tailwind CSS 기반의 UI 컴포넌트 라이브러리로, 다양한 UI 요소를 손쉽게 활용할 수 있도록 도와줍니다. 🚀 ShadCN 설치 방법 ShadCN을 설치하려면 공식 문서를 참고하여 진행하

ShadCN에서 제공하는 Button 컴포넌트를 활용하여 여러 가지 스타일을 적용해 보았습니다.또한, 버튼 클릭 시 alert이 뜨도록 이벤트도 추가했습니다.ShadCN에서 제공하는 Button 컴포넌트는 다양한 variant 속성을 가집니다.아래와 같은 스타일을 기본

이번에는 ShadCN UI의 Dialog(모달) 컴포넌트를 학습하면서, 입력 필드와 버튼을 활용한 모달 창을 구현해 보았습니다ShadCN에서 제공하는 Dialog 컴포넌트는 기본적으로 모달(팝업) 창을 쉽게 구현할 수 있도록 만들어졌습니다.✅ 사용된 주요 컴포넌트Dia

이번에는 ShadCN UI의 Accordion(아코디언) 컴포넌트를 학습하면서,✅ 단일 열림 모드(single)✅ 다중 열림 모드(multiple)두 가지 방식을 모두 적용해보았습니다.ShadCN의 Accordion 컴포넌트를 활용하여 FAQ 스타일의 인터페이스를 만들

이번에는 ShadCN UI의 Card(카드) 컴포넌트를 학습하면서,임의의 멤버 카드들을 만들어보았습니다.멤버 카드 구성에는프로필 사진이름직책전화번호순으로 배치가 되어있습니다. Card → 전체 카드 컨테이너CardHeader → 헤더 부분 (제목, 설명)CardTitl

최근 일주일 동안 인턴 준비를 하기 위해 이사 + 적응이 필요하였습니다.이번에 학습할 내용은 shadcn UI에서의 캘린더 컴포넌트입니다.최근 프로젝트에서 React 19을 사용하면서 shadcn/ui의 캘린더 컴포넌트를 설치하려고 했는데, 설치와 빌드 과정에서 아래와

이번에는 shadcn ui form을 설치를 한 후 간단한 로그인 폼을 제작해보았습니다. >https://ui.shadcn.com/docs/components/form#installation 다음 링크를 통해 form을 깔아주면 react-hook-form → 폼 상

인턴을 진행하는 도중 학습했고 적용했던 내용 중 블로그에 올려야겠다는 내용이 있었다.툴팁(Tooltip)은 우리가 UI를 설계할 때 자주 마주치는 컴포넌트, 사용자 경험(UX)에는 꽤 큰 영향을 주는 요소복잡한 UI나, 아이콘 중심의 인터페이스를 설계할 때 툴팁 하나가

이번에는 저희가 쇼핑몰 사이트나 공고 사이트 등 다양한 콘텐츠의 웹 사이트에서 자주 볼 수 있는 컴포넌트, 케러셀 컴포넌트에 대해 실습해보려고 함.특히 embla-carousel-autoplay 플러그인을 함께 사용해 자동 슬라이드 기능도 구현해봤다.https&#x3A