[Home](/index.md) › [Icons](/icons.md) › shadcn/ui

# shadcn/ui

shadcn/ui is a set of accessible React components built on Radix UI and Tailwind CSS that you copy into your project with a CLI instead of installing a package.

## At a glance

- **Page**: https://devicons.io/icons/shadcn-ui/
- **Website**: https://ui.shadcn.com/
- **Also known as**: shadcn, shadcn-ui, shadcn ui, shadcn CLI
- **Tags**: [React](/icons/tag/react/), [UI Library](/icons/tag/ui-library/), [Components](/icons/tag/components/), [Tailwind](/icons/tag/tailwind/), [Open Source](/icons/tag/open-source/)
- **Version added**: 1.3.0
- **Contrast**: needs a light backdrop on dark backgrounds

## Files

Each file is one variant of this logo. The component name is derived from the file name.

| File | Component | Color SVG | Monochrome SVG | Font class |
| --- | --- | --- | --- | --- |
| `shadcn-ui` | `ShadcnUi` | https://devicons.io/devicons/icons/shadcn-ui.svg | https://devicons.io/devicons/font/shadcn-ui.svg | `devicons devicons-shadcn-ui` |

## Install and use

```bash
npm install @dev.icons/react  # or @dev.icons/vue, @dev.icons/svelte
```

### React

```tsx
import { ShadcnUi } from "@dev.icons/react";
// Monochrome (inherits currentColor):
// import { ShadcnUi } from "@dev.icons/react/mono";

<ShadcnUi size={32} alt="shadcn/ui logo" />
```

### Vue

```vue
<script setup>
import { ShadcnUi } from "@dev.icons/vue";
</script>

<template>
  <ShadcnUi :size="32" alt="shadcn/ui logo" />
</template>
```

### Svelte

```svelte
<script>
  import { ShadcnUi } from "@dev.icons/svelte";
</script>

<ShadcnUi size={32} alt="shadcn/ui logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/shadcn-ui.svg" alt="shadcn/ui logo" width="48" height="48" />
```

### Icon font

```css
@import "devicons/css"; /* npm install devicons */
```

```html
<i class="devicons devicons-shadcn-ui"></i>
```

## About the shadcn/ui logo

The shadcn/ui logo is two parallel diagonal strokes with rounded ends, one long and one short, in black. The slashes echo the slash in the project's name.

The black strokes disappear on dark surfaces, so use the monochrome version in white there.

## When to use this logo

Use shadcn/ui in React component library comparisons, design system docs, Next.js starter templates and UI stack diagrams. It pairs naturally with Tailwind CSS, Radix UI, Next.js, React and v0.

## Related icons

- [Chakra UI](/icons/chakra-ui.md)
- [Mantine](/icons/mantine.md)
- [Material-ui](/icons/material-ui.md)
- [Radix UI](/icons/radix-ui.md)
- [Ant Design](/icons/ant-design.md)
- [Bootstrap](/icons/bootstrap.md)
- [Enact](/icons/enact.md)
- [Evergreen](/icons/evergreen.md)

## Browse the catalog
- Previous: [Serverless](/icons/serverless.md)
- Next: [Shields.io](/icons/shields.md)
- [All icons](/icons.md)