현재 Bootstrap, Bulma, Semantic UI 등과 같은 CSS 프레임워크가 많이 있습니다. 디스플레이(사용자 인터페이스) 구축 속도를 높일 수 있습니다. 현재 유행하고 있는 CSS 도구 중 하나가 Shadcn/ui인데, 이전에는 무엇이었나요?

공식 웹사이트에서 Shadcn/ui는 다음과 같이 말합니다.

"복사하여 앱에 붙여넣을 수 있는 재사용 가능한 구성요소 모음입니다."

따라서 shadcn/ui는 TailwindCSS 및 RadixUI를 사용하여 구축된 뷰의 재사용 가능한 구성 요소 모음입니다. 현재 Next.js, Laravel 등과 같은 여러 프레임워크를 지원합니다. 공식 홈페이지 Shadcn/ui에서 보실 수 있습니다.

지원되는 많은 프레임워크 중. 우리의 주요 목표는 Laravel Breeze를 사용하여 Laravel React에 Shadcn/ui를 설치하는 방법입니다.

첫 번째 단계: laravel 프로젝트를 설치합니다.

laravel new laravel-shadcn

여기서는 Laravel 설치 프로그램(전역)을 사용합니다. 다음 단계에서는 아래 이미지와 같이 옵션을 선택하라는 메시지가 표시됩니다.

프로젝트 요구사항에 따라 입력하세요. 그렇다면 설치가 완료될 때까지 기다리십시오. 설치 속도는 인터넷 연결에 따라 다릅니다.

라라벨 프로젝트 설치가 완료되었습니다. 알았어 계속해!.

두 번째 단계: laravel 프로젝트에 Shadcn/ui 설치

아직 같은 터미널에 있습니다. 먼저 아래 명령을 입력하세요:

cd laravel-shadcn
npx shadcn-ui@latest init

그렇다면 요청이 나타나고 필요에 따라 작성됩니다. 다음 예와 같습니다.

Would you like to use TypeScript (recommended)? no 
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/Components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no

TypeScript 사용자라면 예, 확인, 다음을 선택할 수 있습니다. vscode로 이동하거나 선호하는 코드 편집기에 따라 이동하세요. 여기서는 vscode를 사용하고 다음 명령을 사용합니다.

cd laravel-shadcn

code .

vscode를 자동으로 열고 laravel 프로젝트를 엽니다. 그렇다면 다음 단계는 resources/css/app.css 폴더에 있는 app.css 파일을 열어 shadcnui가 Laravel 프로젝트에 성공적으로 설치되었는지 확인하는 것입니다.

위 그림에서 shadcn은 Laravel 프로젝트에 성공적으로 설치되었습니다.

설명 :

• Shadcn은 app.css 파일을 자동으로 업데이트합니다.
• 버튼, 경고, 테이블 등과 같은 구성 요소가 필요한 경우 그런 다음 laravel 프로젝트의 루트 터미널을 통해 설치해야 합니다. (인터넷 연결 필요)
• 필요한 모든 구성 요소는 공식 ShadcnUI 웹사이트에서 볼 수 있습니다.
• 구성 요소 설치가 완료되면 resources/js/Components/ui/Button.jsx 폴더에 새 파일이 자동으로 생성됩니다. 원하는 대로 이 파일을 수정할 수도 있습니다.

3단계: Shadcn이 설치되어 있는지 확인
ShadcnUI가 설치되었는지 확인하기 위해 터미널에서 명령을 내릴 수 있습니다. 즉, 예를 들어 버튼 구성 요소를 설치합니다. 명령은 다음과 같습니다. npx shadcn-ui@latest 추가 버튼은 아래 이미지에서 볼 수 있습니다

그런 다음 Welcome.jsx 파일을 열고 아래 이미지와 같이 따르십시오.

이미 그렇다면요. 동일한 디렉토리, 즉 laravel-shadcn

제1터미널

npm run dev

제2터미널

php artisan serve

그런 다음 브라우저에서 열면 기본값이 어두운 색상으로 표시된 버튼 구성 요소가 나타납니다.