В настоящее время существует множество CSS-фреймворков, таких как Bootstrap, Bulma, Semantic UI и т. д. что может ускорить создание дисплея (пользовательского интерфейса). один из инструментов CSS, который сейчас в тренде, — это Shadcn/ui, каким он был раньше?

На официальном сайте Shadcn/ui указано

“набор компонентов многократного использования, которые мы можем копировать и вставлять в наши приложения».

Итак, shadcn/ui — это набор повторно используемых компонентов в представлениях, созданный с использованием TailwindCSS и RadixUI. В настоящее время он поддерживает несколько фреймворков, таких как Next.js, Laravel и так далее. можно увидеть на официальном сайте Shadcn/ui.

Из множества поддерживаемых фреймворков. Наша главная цель — как установить Shadcn/ui на Laravel React, используя Laravel Breeze.

Первый шаг: установите проект laravel.

laravel new laravel-shadcn

Здесь мы используем установщик Laravel (глобальный). На следующем этапе нам будет предложено выбрать вариант, как на изображении ниже

Заполните в соответствии с потребностями вашего проекта. Если да, дождитесь завершения установки. Скорость установки зависит от вашего интернет-соединения.

Установка проекта Laravel завершена. ОК, продолжайте!.

Второй шаг: установка Shadcn/ui в проекте laravel

Все еще в том же терминале. Сначала введите команду ниже:

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

Если вы пользуетесь машинописным текстом, вы можете выбрать «Да», «ОК», «Далее». Перейдите в vscode или в свой любимый редактор кода. здесь я использую vscode, затем просто используйте следующую команду

cd laravel-shadcn

code .

Автоматически открывает vscode и ваш проект laravel. Если да, то следующим шагом будет открытие файла app.css в папке resources/css/app.css, чтобы убедиться, что shadcnui успешно установлен в нашем проекте Laravel.

На картинке выше shadcn успешно установлен в нашем проекте Laravel.

Объяснение :

• Shadcn автоматически обновит файл app.css
• Когда нам нужны такие компоненты, как кнопки, оповещения, таблицы и т. д. затем нам нужно установить его через корневой терминал вашего проекта laravel. (Требуется подключение к Интернету)
• Все необходимые вам компоненты можно увидеть на официальном сайте ShadcnUI
• Когда вы закончите установку компонентов, мы автоматически сгенерируем новый файл в папке resources/js/Components/ui/Button.jsx. Мы также можем изменить этот файл по своему желанию.

Шаг третий: убедитесь, что Shadcn установлен
Чтобы убедиться, что ShadcnUI установлен, мы можем дать команду в терминале. а именно, например, мы установим компонент кнопки, команда такая: npx shadcn-ui@latest кнопку добавления можно увидеть на изображении ниже

Затем откройте файл Welcome.jsx и следуйте инструкциям на изображении ниже.

Если это уже есть. откройте два терминала в одном и том же каталоге, а именно laravel-shadcn

Терминал 1

npm run dev

Терминал 2

php artisan serve

Затем откройте его в браузере, и появится компонент кнопки, который по умолчанию окрашен в темный цвет.