Neobrutalism

https://www.neobrutalism.dev/docs
Admin
Neobrutalism is a collection of neobrutalism-styled React Tailwind components based on Shadcn UI,...
Tokens:21,933
Snippets:186
Trust Score:6.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Select Component

Source: https://www.neobrutalism.dev/docs/select

Install the Select component using the Shadcn CLI. This command fetches the necessary files for the component.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/select.json
```

--------------------------------

### Install Card Component

Source: https://www.neobrutalism.dev/docs/card

Use the Shadcn CLI to install the Card component. Ensure you have the necessary package manager configured.

```bash
Copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/card.json
```

--------------------------------

### Install Drawer Component

Source: https://www.neobrutalism.dev/docs/drawer

Use this command to install the Drawer component via npm. Ensure you have the shadcn-ui CLI installed.

```bash
copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/drawer.json
```

--------------------------------

### Install Navigation Menu Component

Source: https://www.neobrutalism.dev/docs/navigation-menu

Use this command to install the Navigation Menu component using npm.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/navigation-menu.json
```

--------------------------------

### Install Switch Component

Source: https://www.neobrutalism.dev/docs/switch

Use this command to install the Switch component via npm.

```bash
copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/switch.json
```

--------------------------------

### Install Dropdown Menu

Source: https://www.neobrutalism.dev/docs/dropdown-menu

Use the shadcn CLI to add the component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/dropdown-menu.json
```

--------------------------------

### Install Sidebar Component with npm

Source: https://www.neobrutalism.dev/docs/sidebar

Use this command to install the sidebar component using npm. Ensure you have the Shadcn CLI installed.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/sidebar.json
```

--------------------------------

### Install Input OTP Component

Source: https://www.neobrutalism.dev/docs/input-otp

Use the Shadcn CLI to add the Input OTP component to your project. Ensure you have the Shadcn CLI installed.

```bash
Copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/input-otp.json
```

--------------------------------

### Install Form Component

Source: https://www.neobrutalism.dev/docs/form

Use the shadcn CLI to add the form component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/form.json
```

--------------------------------

### Install Hover Card Component

Source: https://www.neobrutalism.dev/docs/hover-card

Use the Shadcn CLI to install the Hover Card component. Ensure you have the CLI set up for your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/hover-card.json
```

--------------------------------

### Install Skeleton Component

Source: https://www.neobrutalism.dev/docs/skeleton

Use the Shadcn CLI to add the Skeleton component to your project. Ensure you have the necessary dependencies installed.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/skeleton.json
```

--------------------------------

### Install Progress Component

Source: https://www.neobrutalism.dev/docs/progress

Use the Shadcn CLI to add the Progress component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/progress.json
```

--------------------------------

### Install Command Component

Source: https://www.neobrutalism.dev/docs/command

Use the CLI to add the command component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/command.json
```

--------------------------------

### Install Alert Dialog Component

Source: https://www.neobrutalism.dev/docs/alert-dialog

Use this command to install the Alert Dialog component using the shadcn CLI.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/alert-dialog.json
```

--------------------------------

### Install Tooltip Component

Source: https://www.neobrutalism.dev/docs/tooltip

Use the shadcn CLI to add the tooltip component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/tooltip.json
```

--------------------------------

### Install Popover Component

Source: https://www.neobrutalism.dev/docs/popover

Use the Shadcn CLI to add the Popover component to your project. Ensure you have the CLI installed.

```bash
Copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/popover.json
```

--------------------------------

### Install Carousel Component

Source: https://www.neobrutalism.dev/docs/carousel

Use this command to install the carousel component using npm.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/carousel.json
```

--------------------------------

### Install Alert Component

Source: https://www.neobrutalism.dev/docs/alert

Use the shadcn CLI to add the Alert component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/alert.json
```

--------------------------------

### Combobox Component Installation

Source: https://www.neobrutalism.dev/docs/combobox

The Combobox requires the Popover and Command components to be installed first.

```shell
npx shadcn-ui@latest add popover
npx shadcn-ui@latest add command
```

--------------------------------

### Install Tabs Component

Source: https://www.neobrutalism.dev/docs/tabs

Install the Tabs component using the shadcn-ui CLI. This command fetches the necessary files for the component.

```bash
Copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/tabs.json
```

--------------------------------

### Install Sonner Toast Component

Source: https://www.neobrutalism.dev/docs/sonner

Use this command to install the Sonner toast component using npm.

```bash
copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/sonner.json
```

--------------------------------

### Install Sheet Component

Source: https://www.neobrutalism.dev/docs/sheet

Use the shadcn-ui CLI to add the Sheet component to your project. Ensure you have the shadcn-ui CLI installed.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/sheet.json
```

--------------------------------

### Install Pagination Component

Source: https://www.neobrutalism.dev/docs/pagination

Use the shadcn CLI to add the pagination component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/pagination.json
```

--------------------------------

### Install Button Component

Source: https://www.neobrutalism.dev/docs/button

Use the Shadcn CLI to add the button component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/button.json
```

--------------------------------

### Install Collapsible Component

Source: https://www.neobrutalism.dev/docs/collapsible

Install the collapsible component using the shadcn CLI. This command fetches the necessary files for the component.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/collapsible.json
```

--------------------------------

### Menubar Component Example

Source: https://www.neobrutalism.dev/docs/menubar

A comprehensive example demonstrating the structure and usage of the Menubar component, including nested menus, checkboxes, radio groups, and shortcuts.

```typescript
copy<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled>New Incognito Window</MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Share</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Email link</MenubarItem>
          <MenubarItem>Messages</MenubarItem>
          <MenubarItem>Notes</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>
        Print... <MenubarShortcut>⌘P</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo <MenubarShortcut>⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Find</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Search the web</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Find...</MenubarItem>
          <MenubarItem>Find Next</MenubarItem>
          <MenubarItem>Find Previous</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>Cut</MenubarItem>
      <MenubarItem>Copy</MenubarItem>
      <MenubarItem>Paste</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
      <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarItem inset>
        Reload <MenubarShortcut>⌘R</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled inset>
        Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Toggle Fullscreen</MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Hide Sidebar</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Profiles</MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value="benoit">
        <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
        <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
        <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
      </MenubarRadioGroup>
      <MenubarSeparator />
      <MenubarItem inset>Edit...</MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Add Profile...</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

--------------------------------

### Install Textarea component

Source: https://www.neobrutalism.dev/docs/textarea

Use the shadcn CLI to add the Textarea component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/textarea.json
```

--------------------------------

### Install Slider Component

Source: https://www.neobrutalism.dev/docs/slider

Install the Slider component using the shadcn CLI. This command adds the necessary files to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/slider.json
```

--------------------------------

### Install Label Component

Source: https://www.neobrutalism.dev/docs/label

Use the Shadcn CLI to add the Label component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/label.json
```

--------------------------------

### Install Calendar Component

Source: https://www.neobrutalism.dev/docs/calendar

Use the shadcn CLI to add the calendar component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/calendar.json
```

--------------------------------

### File Input Example

Source: https://www.neobrutalism.dev/docs/input

Demonstrates the usage of the Input component for file uploads.

```typescript
<Input type="file" />

```

--------------------------------

### Install Resizable Component

Source: https://www.neobrutalism.dev/docs/resizable

Use the shadcn/ui CLI to add the Resizable component to your project. This command fetches the necessary files for the component.

```bash
Copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/resizable.json
```

--------------------------------

### Install Image Card Component

Source: https://www.neobrutalism.dev/docs/image-card

Install the Image Card component using the Shadcn CLI. This command fetches the necessary files to add the component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/image-card.json
```

--------------------------------

### Install Badge Component

Source: https://www.neobrutalism.dev/docs/badge

Use the shadcn CLI to add the Badge component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/badge.json
```

--------------------------------

### Card Component Example

Source: https://www.neobrutalism.dev/docs/card

A complete example of the Card component demonstrating a login form. It includes input fields for email and password, along with login buttons and signup links.

```typescript
Copy<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Login to your account</CardTitle>
    <CardDescription>
      Enter your email below to login to your account
    </CardDescription>
  </CardHeader>
  <CardContent>
    <form>
      <div className="flex flex-col gap-6">
        <div className="grid gap-2">
          <Label htmlFor="email">Email</Label>
          <Input
            id="email"
            type="email"
            placeholder="m@example.com"
            required
          />
        </div>
        <div className="grid gap-2">
          <div className="flex items-center">
            <Label htmlFor="password">Password</Label>
            <a
              href="#"
              className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
            >
              Forgot your password?
            </a>
          </div>
          <Input id="password" type="password" required />
        </div>
      </div>
    </form>
  </CardContent>
  <CardFooter className="flex-col gap-2">
    <Button type="submit" className="w-full">
      Login
    </Button>
    <Button variant="neutral" className="w-full">
      Login with Google
    </Button>
    <div className="mt-4 text-center text-sm">
      Don&apos;t have an account?{" "}
      <a href="#" className="underline underline-offset-4">
        Sign up
      </a>
    </div>
  </CardFooter>
</Card>
```

--------------------------------

### Install Avatar Component

Source: https://www.neobrutalism.dev/docs/avatar

Install the Avatar component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/avatar.json
```

--------------------------------

### Install Accordion via CLI

Source: https://www.neobrutalism.dev/docs/accordion

Use the shadcn CLI to add the accordion component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/accordion.json
```

--------------------------------

### Install Marquee component

Source: https://www.neobrutalism.dev/docs/marquee

Use the Shadcn CLI to add the Marquee component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/marquee.json
```

--------------------------------

### Install Table Component

Source: https://www.neobrutalism.dev/docs/table

Use the shadcn CLI to add the table component to your project. This command fetches the necessary files from the specified URL.

```bash
Copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/table.json
```

--------------------------------

### Install Menubar Component

Source: https://www.neobrutalism.dev/docs/menubar

Use the Shadcn CLI to add the Menubar component to your project. This command fetches the necessary files from the specified JSON URL.

```bash
copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/menubar.json
```

--------------------------------

### Tabs Component Usage Example

Source: https://www.neobrutalism.dev/docs/tabs

A complete example demonstrating the usage of the Tabs component with two content panels: Account and Password. This includes form elements within each tab.

```typescript
<Tabs defaultValue="account" className="max-w-[400px]">
  <TabsList className="grid w-full grid-cols-2">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card>
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>
          Make changes to your account here. Click save when you&apos;re
          done.
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-6">
        <div className="grid gap-3">
          <Label htmlFor="tabs-demo-name">Name</Label>
          <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />
        </div>
        <div className="grid gap-3">
          <Label htmlFor="tabs-demo-username">Username</Label>
          <Input id="tabs-demo-username" defaultValue="@peduarte" />
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full" variant="neutral">
          Save changes
        </Button>
      </CardFooter>
    </Card>
  </TabsContent>
  <TabsContent value="password">
    <Card>
      <CardHeader>
        <CardTitle>Password</CardTitle>
        <CardDescription>
          Change your password here. After saving, you&apos;ll be logged
          out.
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-6">
        <div className="grid gap-3">
          <Label htmlFor="tabs-demo-current">Current password</Label>
          <Input id="tabs-demo-current" type="password" />
        </div>
        <div className="grid gap-3">
          <Label htmlFor="tabs-demo-new">New password</Label>
          <Input id="tabs-demo-new" type="password" />
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full" variant="neutral">
          Save password
        </Button>
      </CardFooter>
    </Card>
  </TabsContent>
</Tabs>
```

--------------------------------

### Install Neobrutalism Input Component

Source: https://www.neobrutalism.dev/docs/input

Use the Shadcn CLI to add the Neobrutalism Input component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/input.json
```

--------------------------------

### Install Chart Component via CLI

Source: https://www.neobrutalism.dev/docs/chart

Use the shadcn CLI to add the chart component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/chart.json
```

--------------------------------

### Install Context Menu Component

Source: https://www.neobrutalism.dev/docs/context-menu

Use the shadcn CLI to add the Context Menu component to your project. This command fetches the necessary files from the provided JSON URL.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/context-menu.json
```

--------------------------------

### Install Checkbox Component

Source: https://www.neobrutalism.dev/docs/checkbox

Use the shadcn CLI to add the Checkbox component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/checkbox.json
```

--------------------------------

### Install Breadcrumb Component

Source: https://www.neobrutalism.dev/docs/breadcrumb

Use the shadcn CLI to add the Breadcrumb component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/breadcrumb.json
```

--------------------------------

### Collapsible Component Example

Source: https://www.neobrutalism.dev/docs/collapsible

A complete example of a collapsible component. It includes a trigger button to toggle the visibility of content. Ensure the necessary CSS classes and component imports are correctly set up.

```typescript
<Collapsible
  open={isOpen}
  onOpenChange={setIsOpen}
  className="w-[350px] space-y-2"
>
  <div className="rounded-base flex items-center justify-between space-x-4 border-2 border-border text-main-foreground bg-main px-4 py-2">
    <h4 className="text-sm font-heading">
      @peduarte starred 3 repositories
    </h4>
    <CollapsibleTrigger asChild>
      <Button
        variant="noShadow"
        size="sm"
        className="w-9 bg-secondary-background text-foreground p-0"
      >
        <ChevronsUpDown className="size-4" />
        <span className="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div className="rounded-base border-2 border-border bg-main px-4 py-3 font-mono font-base text-main-foreground text-sm">
    @radix-ui/primitives
  </div>
  <CollapsibleContent className="space-y-2 text-main-foreground font-base">
    <div className="rounded-base border-2 border-border bg-main px-4 py-3 font-mono text-sm">
      @radix-ui/colors
    </div>
    <div className="rounded-base border-2 border-border bg-main px-4 py-3 font-mono text-sm">
      @stitches/react
    </div>
  </CollapsibleContent>
</Collapsible>
```

--------------------------------

### Input with Label

Source: https://www.neobrutalism.dev/docs/input

Example of an input field paired with a descriptive label.

```typescript
<Label htmlFor="email">Email</Label>
<Input id="email" placeholder="Email" />

```

--------------------------------

### Install Radio Group via CLI

Source: https://www.neobrutalism.dev/docs/radio-group

Use the shadcn CLI to add the Radio Group component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/radio-group.json
```

--------------------------------

### Install Dialog Component

Source: https://www.neobrutalism.dev/docs/dialog

Use the Shadcn CLI to add the Dialog component to your project. This command fetches the necessary files for the dialog functionality.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/dialog.json
```

--------------------------------

### Import Tabs Components

Source: https://www.neobrutalism.dev/docs/tabs

Import all necessary components for the Tabs example. Ensure these components are available in your project's alias path.

```typescript
Copyimport {
  Button,
} from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Input,
} from "@/components/ui/input"
import {
  Label,
} from "@/components/ui/label"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
```

--------------------------------

### Disabled Input Example

Source: https://www.neobrutalism.dev/docs/input

Shows how to render a disabled input field.

```typescript
<Input disabled placeholder="Disabled input" />

```

--------------------------------

### Install Scroll Area Component

Source: https://www.neobrutalism.dev/docs/scroll-area

Use the CLI command to add the Scroll Area component to your project.

```bash
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/scroll-area.json
```

--------------------------------

### Basic Slider Example

Source: https://www.neobrutalism.dev/docs/slider

A simple slider with a default value. Configure max value and step increment as needed.

```typescript
<Slider defaultValue={[33]} max={100} step={1} />

```

--------------------------------

### Replace tailwindcss-animate with tw-animate-css

Source: https://www.neobrutalism.dev/docs/migrating-from-v3

Install the new animation library and remove the deprecated one.

```bash
pnpm add tw-animate-css
```

```bash
pnpm remove tailwindcss-animate
```

--------------------------------

### Basic Context Menu Example

Source: https://www.neobrutalism.dev/docs/context-menu

A functional context menu with a trigger element that displays various options on right-click. Includes standard items, disabled items, submenus, separators, checkboxes, and radio groups.

```typescript
<ContextMenu>
  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-text border-dashed text-sm font-base">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuContent className="w-64">
    <ContextMenuItem inset>
      Back
      <ContextMenuShortcut>⌘[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem inset disabled>
      Forward
      <ContextMenuShortcut>⌘]</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem inset>
      Reload
      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
      <ContextMenuSubContent className="w-48">
        <ContextMenuItem>
          Save Page As...
          <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>Create Shortcut...</ContextMenuItem>
        <ContextMenuItem>Name Window...</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Developer Tools</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>
      Show Bookmarks Bar
      <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuRadioGroup value="pedro">
      <ContextMenuLabel inset>People</ContextMenuLabel>
      <ContextMenuSeparator />
      <ContextMenuRadioItem value="pedro">
        Pedro Duarte
      </ContextMenuRadioItem>
      <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>
```

--------------------------------

### Render ImageCard Component

Source: https://www.neobrutalism.dev/docs/image-card

Use the ImageCard component by providing an imageUrl and an optional caption. This is a basic example of how to display an image with text.

```javascript
<ImageCard
  caption="Image"
  imageUrl="https://hips.hearstapps.com/hmg-prod/images/flowers-trees-and-bushes-reach-their-peak-of-full-bloom-in-news-photo-1678292967.jpg?resize=300:*"
></ImageCard>
```

--------------------------------

### Basic Alert Dialog Example

Source: https://www.neobrutalism.dev/docs/alert-dialog

A standard implementation of the Alert Dialog component. It includes a trigger button, header with title and description, and footer with cancel and action buttons.

```typescript
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Open</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

--------------------------------

### Import Table Components and Define Data

Source: https://www.neobrutalism.dev/docs/table

Import the necessary table components from shadcn/ui and define your data structure. The 'invoices' array serves as an example data source.

```typescript
Copyimport {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'

const invoices = [
  {
    invoice: 'INV001',
    paymentStatus: 'Paid',
    totalAmount: '$250.00',
    paymentMethod: 'Credit Card',
  },
  {
    invoice: 'INV002',
    paymentStatus: 'Pending',
    totalAmount: '$150.00',
    paymentMethod: 'PayPal',
  },
  {
    invoice: 'INV003',
    paymentStatus: 'Unpaid',
    totalAmount: '$350.00',
    paymentMethod: 'Bank Transfer',
  },
  {
    invoice: 'INV004',
    paymentStatus: 'Paid',
    totalAmount: '$450.00',
    paymentMethod: 'Credit Card',
  },
  {
    invoice: 'INV005',
    paymentStatus: 'Paid',
    totalAmount: '$550.00',
    paymentMethod: 'PayPal',
  },
  {
    invoice: 'INV006',
    paymentStatus: 'Pending',
    totalAmount: '$200.00',
    paymentMethod: 'Bank Transfer',
  },
  {
    invoice: 'INV007',
    paymentStatus: 'Unpaid',
    totalAmount: '$300.00',
    paymentMethod: 'Credit Card',
  },
]
```

--------------------------------

### Two Thumbs Slider Example

Source: https://www.neobrutalism.dev/docs/slider

Demonstrates a slider with two thumbs, allowing selection of a range. Configure thumbs with an array of default values.

```typescript
<Slider defaultValue={[33, 66]} max={100} step={1} />

```

--------------------------------

### Basic Popover Example

Source: https://www.neobrutalism.dev/docs/popover

A basic implementation of the Popover component. The PopoverTrigger is typically a Button, and PopoverContent holds the floating UI.

```typescript
<Popover>
  <PopoverTrigger asChild>
    <Button example="noShadow">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80 text-main-foreground">
    <div className="grid gap-4">
      <div className="space-y-2">
        <h4 className="font-heading leading-none">Dimensions</h4>
        <p className="text-sm">Set the dimensions for the layer.</p>
      </div>
      <div className="grid gap-2">
        <div className="grid grid-cols-3 items-center gap-4">
          <Label htmlFor="width">Width</Label>
          <Input
            id="width"
            defaultValue="100%"
            className="col-span-2 h-8"
          />
        </div>
        <div className="grid grid-cols-3 items-center gap-4">
          <Label htmlFor="maxWidth">Max. width</Label>
          <Input
            id="maxWidth"
            defaultValue="300px"
            className="col-span-2 h-8"
          />
        </div>
        <div className="grid grid-cols-3 items-center gap-4">
          <Label htmlFor="height">Height</Label>
          <Input
            id="height"
            defaultValue="25px"
            className="col-span-2 h-8"
          />
        </div>
        <div className="grid grid-cols-3 items-center gap-4">
          <Label htmlFor="maxHeight">Max. height</Label>
          <Input
            id="maxHeight"
            defaultValue="none"
            className="col-span-2 h-8"
          />
        </div>
      </div>
    </div>
  </PopoverContent>
</Popover>
```

--------------------------------

### Basic Dialog Example

Source: https://www.neobrutalism.dev/docs/dialog

A standard implementation of the Dialog component, featuring a form for editing a profile. It includes a trigger button, content with input fields, and footer buttons for cancel and save actions.

```typescript
<Dialog>
  <form>
    <DialogTrigger asChild>
      <Button>Edit Profile</Button>
    </DialogTrigger>
    <DialogContent className="sm:max-w-[425px]">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you&apos;re
          done.
        </DialogDescription>
      </DialogHeader>
      <div className="grid gap-4">
        <div className="grid gap-3">
          <Label htmlFor="name-1">Name</Label>
          <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
        </div>
        <div className="grid gap-3">
          <Label htmlFor="username-1">Username</Label>
          <Input id="username-1" name="username" defaultValue="@peduarte" />
        </div>
      </div>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="neutral">Cancel</Button>
        </DialogClose>
        <Button type="submit">Save changes</Button>
      </DialogFooter>
    </DialogContent>
  </form>
</Dialog>
```

--------------------------------

### Basic Sheet Usage

Source: https://www.neobrutalism.dev/docs/sheet

A complete example of a Sheet component with a trigger button, header, description, input fields, and footer with save and close buttons. The SheetContent can be configured with a 'side' property.

```typescript
<Sheet>
  <SheetTrigger asChild>
    <Button>Open</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you&apos;re
        done.
      </SheetDescription>
    </SheetHeader>
    <div className="grid flex-1 auto-rows-min gap-6 px-4">
      <div className="grid gap-3">
        <Label htmlFor="sheet-demo-name">Name</Label>
        <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
      </div>
      <div className="grid gap-3">
        <Label htmlFor="sheet-demo-username">Username</Label>
        <Input id="sheet-demo-username" defaultValue="@peduarte" />
      </div>
    </div>
    <SheetFooter>
      <Button type="submit">Save changes</Button>
      <SheetClose asChild>
        <Button variant="neutral">Close</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

--------------------------------

### Render Input OTP Component

Source: https://www.neobrutalism.dev/docs/input-otp

Example of rendering the Input OTP component with a maximum length of 6 digits. It includes groups and slots for each digit, along with a separator.

```typescript
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>
```

--------------------------------

### Create a Horizontal Resizable Panel Group

Source: https://www.neobrutalism.dev/docs/resizable

Example of a horizontal resizable panel group with two main panels. The right panel is further divided into a vertical group.

```typescript
Copy<ResizablePanelGroup
  direction="horizontal"
  className="rounded-base max-w-md border-2 border-border text-main-foreground shadow-shadow"
>
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center bg-main p-6">
      <span className="font-base">One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel defaultSize={25}>
        <div className="flex h-full items-center justify-center bg-main p-6">
          <span className="font-base">Two</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={75}>
        <div className="flex h-full items-center justify-center bg-main p-6">
          <span className="font-base">Three</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>

```

--------------------------------

### Vertical Slider Example

Source: https://www.neobrutalism.dev/docs/slider

Renders the slider vertically. Use the 'orientation' prop set to 'vertical'.

```typescript
<Slider orientation="vertical" defaultValue={[33]} />

```

--------------------------------

### Page Layout with SidebarProvider and SidebarInset

Source: https://www.neobrutalism.dev/docs/sidebar

This code demonstrates how to set up the main page structure using `SidebarProvider` and `SidebarInset`. It includes a header with breadcrumbs and a content area.

```typescript
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

import { AppSidebar } from "./sidebar"

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ml-1" />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem className="hidden md:block">
                  <BreadcrumbLink href="#">
                    Building Your Application
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem>
                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </div>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
            <div className="aspect-video rounded-base bg-background/50 border-2 border-border" />
            <div className="aspect-video rounded-base bg-background/50 border-2 border-border" />
            <div className="aspect-video rounded-base bg-background/50 border-2 border-border" />
          </div>
          <div className="min-h-[100vh] flex-1 rounded-base bg-background/50 border-2 border-border md:min-h-min" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

--------------------------------

### Import Context Menu Components

Source: https://www.neobrutalism.dev/docs/context-menu

Import all necessary components for the Context Menu from the shadcn/ui library. Ensure the path correctly points to your components directory.

```typescript
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '@/components/ui/context-menu'
```

--------------------------------

### Import Marquee component

Source: https://www.neobrutalism.dev/docs/marquee

Import the component into your file to begin using it.

```javascript
import Marquee from '@/components/ui/marquee'
```

--------------------------------

### Upgrade project dependencies

Source: https://www.neobrutalism.dev/docs/migrating-from-v3

Update core UI and utility libraries to their latest versions.

```bash
pnpm up "@radix-ui/*" cmdk lucide-react recharts tailwind-merge clsx --latest
```

--------------------------------

### Controlled Slider Example

Source: https://www.neobrutalism.dev/docs/slider

A slider controlled by state. Use 'value' and 'onValueChange' props to manage the slider's state externally.

```typescript
const [value, setValue] = useState([50])

<Slider value={value} onValueChange={setValue} />

```

--------------------------------

### Import Command Components

Source: https://www.neobrutalism.dev/docs/command

Import the necessary sub-components and icons to build the command menu.

```typescript
import {
  Calculator,
  Calendar,
  CreditCard,
  Settings,
  Smile,
  User,
} from "lucide-react"
 
import * as React from "react"
 
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
```

--------------------------------

### Import Dropdown Menu Components

Source: https://www.neobrutalism.dev/docs/dropdown-menu

Import the necessary UI components and icons from your project structure.

```typescript
import {
  Cloud,
  CreditCard,
  Github,
  Keyboard,
  LifeBuoy,
  LogOut,
  Mail,
  MessageSquare,
  Plus,
  PlusCircle,
  Settings,
  User,
  UserPlus,
  Users,
} from 'lucide-react'
 
import React from 'react'
 
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
```

--------------------------------

### Basic Drawer Implementation

Source: https://www.neobrutalism.dev/docs/drawer

Render a basic Drawer component with a trigger button and content. The DrawerTrigger opens the DrawerContent.

```typescript
copy<Drawer>
  <DrawerTrigger asChild>
    <Button>Open</Button>
  </DrawerTrigger>
  <DrawerContent>
    <div className="mx-auto w-[300px]">
      <DrawerHeader>
        <DrawerTitle>Are you absolutely sure?</DrawerTitle>
        <DrawerDescription>This action cannot be undone.</DrawerDescription>
      </DrawerHeader>
      <DrawerFooter className="grid grid-cols-2">
        <Button example="noShadow">Submit</Button>
        <DrawerClose asChild>
          <Button className="bg-secondary-background text-foreground" example="noShadow">
            Cancel
          </Button>
        </DrawerClose>
      </DrawerFooter>
    </div>
  </DrawerContent>
</Drawer>
```

--------------------------------

### Implement Dropdown Menu

Source: https://www.neobrutalism.dev/docs/dropdown-menu

Structure the dropdown menu with triggers, content, groups, and sub-menus.

```jsx
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button example={'noShadow'}>Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <User />
        <span>Profile</span>
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <CreditCard />
        <span>Billing</span>
        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Settings />
        <span>Settings</span>
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Keyboard />
        <span>Keyboard shortcuts</span>
        <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <Users />
        <span>Team</span>
      </DropdownMenuItem>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          <UserPlus />
          <span>Invite users</span>
        </DropdownMenuSubTrigger>
        <DropdownMenuPortal>
          <DropdownMenuSubContent>
            <DropdownMenuItem>
              <Mail />
              <span>Email</span>
            </DropdownMenuItem>
            <DropdownMenuItem>
              <MessageSquare />
              <span>Message</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <PlusCircle />
              <span>More...</span>
            </DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuPortal>
      </DropdownMenuSub>
      <DropdownMenuItem>
        <Plus />
        <span>New Team</span>
        <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <Github />
      <span>GitHub</span>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <LifeBuoy />
      <span>Support</span>
    </DropdownMenuItem>
    <DropdownMenuItem disabled>
      <Cloud />
      <span>API</span>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <LogOut />
      <span>Log out</span>
      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Render Switch Component

Source: https://www.neobrutalism.dev/docs/switch

Example of rendering a Switch component with an associated Label. Ensure the `htmlFor` attribute on the Label matches the `id` attribute on the Switch for accessibility.

```typescript
copy<div className="flex items-center space-x-2">
  <Switch id="airplane-mode" />
  <Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>
```

--------------------------------

### Import Select Components

Source: https://www.neobrutalism.dev/docs/select

Import the necessary components for the Select interface from the shadcn/ui library. Ensure the path is correct for your project structure.

```typescript
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

```

--------------------------------

### Import Tooltip Components

Source: https://www.neobrutalism.dev/docs/tooltip

Import the necessary components from the UI library to use tooltips in your application.

```typescript
import { Button } from '@/components/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
```

--------------------------------

### Import Alert Dialog Components

Source: https://www.neobrutalism.dev/docs/alert-dialog

Import necessary components for the Alert Dialog from the shadcn/ui library. Ensure you have the Button component available.

```typescript
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
```

--------------------------------

### Import Accordion Components

Source: https://www.neobrutalism.dev/docs/accordion

Import the necessary sub-components from the local UI directory.

```typescript
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
```
Tokens:
Raw