shadcn-ui

KO | EN

gitlite — search

#python #hacktoberfest #llm #golang #android #machine-learning #nodejs #java #awesome #cli #kubernetes #vue #ios #open-source

(★ 19)

No description available.

shadcn-ui 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# PayloadCMS Shadcn UI Plugin

![PayloadCMS Shadcn UI Plugin](https://raw.githubusercontent.com/payloadcmsdirectory/shadcn-ui/main/public/images/posts-shadcn.png)
![PayloadCMS Shadcn UI Plugin](https://raw.githubusercontent.com/payloadcmsdirectory/shadcn-ui/main/public/images/categories-shadcn.png)

A plugin that integrates Shadcn UI components with PayloadCMS, providing a modern and accessible UI toolkit for your admin panel.

## Features

- 🎨 Modern UI components based on Radix UI
- 🌗 Dark mode support
- ♿ Accessible components
- 🎯 Type-safe with TypeScript
- 📱 Responsive design
- 🔧 Highly customizable

## Installation

```bash
npm install @payloadcmsdirectory/shadcn-ui
# or
yarn add @payloadcmsdirectory/shadcn-ui
# or
pnpm add @payloadcmsdirectory/shadcn-ui
```

## Usage

Add the plugin to your Payload config:

```typescript
import shadcnPlugin from "@payloadcmsdirectory/shadcn-ui";
import { buildConfig } from "payload/config";

export default buildConfig({
  plugins: [
    shadcnPlugin({
      // Plugin options
      enableAll: true, // Enable all components
    }),
  ],
});
```

## Components

The plugin includes all the components from Shadcn UI, pre-configured for use with PayloadCMS:

- Accordion
- Alert Dialog
- Avatar
- Button
- Calendar
- Card
- Checkbox
- Collapsible
- Command
- Context Menu
- Dialog
- Dropdown Menu
- Form
- Hover Card
- Input
- Label
- Menubar
- Navigation Menu
- Popover
- Progress
- Radio Group
- ScrollArea
- Select
- Separator
- Sheet
- Slider
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip

## Configuration

You can customize which components to enable and their default styles:

```typescript
shadcnPlugin({
  // Enable specific components
  components: {
    button: true,
    input: true,
    select: true,
    // ...
  },

// Customize theme
  theme: {
    extend: {
      colors: {
        // Your custom colors
      },
    },
  },
});
```

## Contributing

Please read our [Contributing Guide](CONTRIBUTING.md) before submitting a Pull Request to the project.

## Support

- [Documentation](https://github.com/payloadcmsdirectory/shadcn-ui#readme)
- [Issues](https://github.com/payloadcmsdirectory/shadcn-ui/issues)
- [Discussions](https://github.com/payloadcmsdirectory/shadcn-ui/discussions)

## License

shadcn-ui

shadcn-ui 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

shadcn-ui

shadcn-ui 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README