### 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 File New Tab ⌘T New Window ⌘N New Incognito Window Share Email link Messages Notes Print... ⌘P Edit Undo ⌘Z Redo ⇧⌘Z Find Search the web Find... Find Next Find Previous Cut Copy Paste View Always Show Bookmarks Bar Always Show Full URLs Reload ⌘R Force Reload ⇧⌘R Toggle Fullscreen Hide Sidebar Profiles Andy Benoit Luis Edit... Add Profile... ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Login to your account Enter your email below to login to your account
Don't have an account?{" "} Sign up
``` -------------------------------- ### 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 Account Password Account Make changes to your account here. Click save when you're done.
Password Change your password here. After saving, you'll be logged out.
``` -------------------------------- ### 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

@peduarte starred 3 repositories

@radix-ui/primitives
@radix-ui/colors
@stitches/react
``` -------------------------------- ### Input with Label Source: https://www.neobrutalism.dev/docs/input Example of an input field paired with a descriptive label. ```typescript ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Right click here Back ⌘[ Forward ⌘] Reload ⌘R More Tools Save Page As... ⇧⌘S Create Shortcut... Name Window... Developer Tools Show Bookmarks Bar ⌘⇧B Show Full URLs People Pedro Duarte Colm Tuite ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Are you absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. Cancel Continue ``` -------------------------------- ### 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 ``` -------------------------------- ### 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

Dimensions

Set the dimensions for the layer.

 ``` -------------------------------- ### 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
Edit profile Make changes to your profile here. Click save when you're done.
``` -------------------------------- ### 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 Edit profile Make changes to your profile here. Click save when you're done.
``` -------------------------------- ### 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 ``` -------------------------------- ### 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
One
Two
Three
``` -------------------------------- ### Vertical Slider Example Source: https://www.neobrutalism.dev/docs/slider Renders the slider vertically. Use the 'orientation' prop set to 'vertical'. ```typescript ``` -------------------------------- ### 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 (
Building Your Application Data Fetching
) } ``` -------------------------------- ### 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]) ``` -------------------------------- ### 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
Are you absolutely sure? This action cannot be undone.
``` -------------------------------- ### Implement Dropdown Menu Source: https://www.neobrutalism.dev/docs/dropdown-menu Structure the dropdown menu with triggers, content, groups, and sub-menus. ```jsx My Account Profile ⇧⌘P Billing ⌘B Settings ⌘S Keyboard shortcuts ⌘K Team Invite users Email Message More... New Team ⌘+T GitHub Support API Log out ⇧⌘Q ``` -------------------------------- ### 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
``` -------------------------------- ### 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" ```