Компоненты UI

В этом разделе представлена документация по всем UI компонентам, доступным в Boilerplate. Вы узнаете, как использовать и настраивать эти компоненты для вашего проекта.

Обзор компонентов

Boilerplate использует библиотеку компонентов Shadcn UI, которая предоставляет готовые к использованию компоненты, построенные с использованием Radix UI и Tailwind CSS. Эти компоненты полностью настраиваемы и доступны.

Пользовательские компоненты

В дополнение к базовым UI компонентам, вы можете использовать наши пользовательские компоненты для быстрого создания ключевых секций вашего приложения:

Установка компонентов

Компоненты Shadcn UI устанавливаются с помощью CLI. Пример установки кнопки:

bash
npx shadcn@latest add button

После установки компонента, он будет доступен в вашем проекте в папкеcomponents/ui

Доступные компоненты

В Boilerplate доступны следующие компоненты UI:

  • Button

    Кнопки используются для действий и отправки форм.

    tsx
    import { Button } from '@/components/ui/button'  export default function Example() { return ( <Button variant='default'>Нажми меня</Button> ) }

  • Card

    Карточки используются для группировки контента и действий.

    tsx
    import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'  export default function Example() { return ( <Card> <CardHeader> <CardTitle>Заголовок карточки</CardTitle> <CardDescription>Описание карточки</CardDescription> </CardHeader> <CardContent> <p>Содержимое карточки</p> </CardContent> <CardFooter> <p>Футер карточки</p> </CardFooter> </Card> ) }

Настройка компонентов

Вы можете настроить компоненты, изменяя их стили в файлах компонентов. Например, чтобы изменить цвета кнопки, откройте файлcomponents/ui/button.tsxи измените стили, определенные с помощью Tailwind CSS.

tsx
// Пример изменения вариантов кнопки const buttonVariants = cva( 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: 'border border-input hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'underline-offset-4 hover:underline text-primary', // Добавьте свой пользовательский вариант custom: 'bg-purple-500 text-white hover:bg-purple-700', }, // ... }, } )

Дополнительные ресурсы