ShadCN

It’s a component library based on Redix and Base UI to help you make in beautiful website faster. It’s works with react and react based framework like Nextjs.

It’s fully customizable so utilize it fully by using “shadcn create” for setting your project. Prefer BaseUI.

Installing components -

bunx --bun shadcn@latest add button

Customizing Components

variant="destructive" - for using a different variant than default
size="lg" - for using component in different size
className="text-centre" - for giving custom css to component using tailwind

Custom Theming

Shadcn supports customizing the theme. You can give custom look to your project by changing colors in existing variables in global.css or add a new color variable in root and dark mode(if exists) and use that anywhere by adding that in theme. You can't use a color variable directly in tailwind until you haven't added it @theme in global.css. cn is a small helper function in shadcn that cleanly combines Tailwind classes, handles conditions, and prevents style conflicts. sr-only - a tailwind classname that is used for making the component accessible to screen readers only.

Components

1. Accordion - FAQ style component (vertically stacked set of interactive headings that each reveal a section of content.)
   It has AccordionItem (with value), AccordionTrigger and AccordionContent.

2. Alert Dialog - delete your account (dialog that interrupts the user with important content and expects a response.)
   It has AlertDialogTrigger and AlertDialogContent( which has AlertDialogHeader (with header and description) and AlertDialogFooter (with cancel and action button)).

3. Alert - your changes have been saved or payment failed (an alert with an icon, title and description.)
   It has AlertTitle and AlertDescription. It has two variants, default and destructive.

4. Aspect Ratio - (youtube embed or avatar image) Displays content within a desired ratio.
   It has Image (which has src=image source and alt = alternate text for image).

5. Avatar - An image element with a fallback for representing the user.
   It has AvatarImage (which has src = source url and alt for image) and AvatarFallback (text to be displayed if image not loaded).

6. Badge - Displays a badge or a component that looks like a badge.
   It has variants ("default | outline | secondary | destructive")
   You can use the asChild prop to make another component look like a badge.

7. Breadcrumb - Displays the path to the current resource using a hierarchy of links.
   It has BreadcrumbList (which has BreadcrumbItem (has BreadcrumbLink with Link component asChild and BreadcrumbPage for current page) and BreadcrumbSeparator).

8. Button Group - A container that groups related buttons together with consistent styling.
   It has ButtonGroup (with Button as child). Use, ButtonGroup when you want to group buttons that perform an action, ToggleGroup when you want to group buttons that toggle a state.
   Orientation = Set the orientation prop to change the button group layout, Size = Control the size of buttons using the size prop on individual buttons, Separator = The ButtonGroupSeparator component visually divides buttons within a group. It has

9. Button - Displays a button or a component that looks like a button.
   It has variants ("default" | "outline" | "ghost" | "destructive" | "secondary" | "link"), size ("default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg").

10. Calendar - A date field component that allows users to enter and edit date.

11. Card - Displays a card with header, content, and footer.
    It has CardHeader (with CardTitle, CardDescription, CardAction), CardContent and CardFooter.

12. Carousel - left and right swipe profiles using arrow key icon (A carousel with motion and swipe built using Embla.)
    It has CarouselContent (which can have multiple CarouselItem), CarouselPrevious and CarouselNext. It has lots of customization and other options.

13. Charts - Beautiful charts. Built using Recharts. Copy and paste into your apps.

14. Checkbox - A control that allows the user to toggle between checked and not checked.

15. Collapsible - An interactive component which expands/collapses a panel. It has CollapsibleTrigger and CollapsibleContent.

16. Combobox - select the framework (Autocomplete input and command palette with a list of suggestions.)
    It is built using a composition of the <Popover /> and the <Command /> components.

17. Commnad - Fast, composable, unstyled command menu for React.
    It has CommandInput and CommandList (which has CommandEmpty, CommandGroup(with multiple CommandItem) and CommandSeparator).

18. Context Menu - Displays a menu to the user — such as a set of actions or functions — triggered by a button.
    It has ContextMenuTrigger and ContextMenuContent (which has ContextMenuItem which has lot’s of customization).

19. Data Table - Powerful table and datagrids built using TanStack Table.

20. Date Picker - A date picker component with range and presets.
    The Date Picker is built using a composition of the <Popover /> and the <Calendar /> components.
    It has PopoverTrigger (which has a Button) and PopoverContent (which has Calender).
    It has D.O.B picker, picker with input and date and time picker.

21. Dialog - A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
    It has DialogTrigger (which has Button) and DialogContent (which has DialogHeader (which has DialogTitle and DialogDescription) and some component and DialogFooter (which has DialogClose with Button asChild)).
    To use the Dialog component from within a Context Menu or Dropdown Menu, you must encase the Context Menu or Dropdown Menu component in the Dialog component.

22. Drawer - A drawer component for React.
    It has DrawerTrigger and DrawerContent (which has DrawerHeader (has DrawerTitle and DrawerDescription) and DrawerFooter (has Button and DrawerClose with Button)).
    Responsive Dialog - You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

23. Dropdown Menu - Displays a menu to the user — such as a set of actions or functions — triggered by a button.
    It has DropdownMenuTrigger and DropdownMenuContent (which has DropdownMenuLabel, DropdownMenuSeparator and DropdownMenuItem).
    It has example code using checkboxes, radio group and Dialog.

24. Empty - Use the Empty component to display an empty state.
    It has EmptyHeader (has EmptyMedia, EmptyTitle and EmptyDescription), EmptyContent (has multiple Button) and Button.
    It has examples with Outline, Background, avatar, avatar group and input group.

25. Field - Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

26. Hover Card - For sighted users to preview content available behind a link.
    It has HoverCardTrigger and HoverCardContent.

27. Input Group - Display additional information or actions to an input or textarea.
    It has InputGroupInput, InputGroupAddon (can have icons, InputGroupText, InputGroupButton, Tooltip, Separator and DropdownMenu).

28. Input OTP - Accessible one-time password component with copy paste functionality.

29. Input - Displays a form input field or a component that looks like an input field.
    It has multiple examples - default (email input), file, input disabled, with label, with button.

30. Item - A versatile component that you can use to display any content.
    The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.
    It has ItemHeader, ItemMedia(which has icon), ItemContent (which has ItemTitle and ItemDescription), ItemActions (a Button) and ItemFooter.
    Item vs Field - Use Field if you need to display a form input such as a checkbox, input, radio, or select. If you only need to display content such as a title, description, and actions, use Item.

31. kbd - display keyboard shortcuts (Used to display textual user input from keyboard.)
    It can be used in a Button, ToolTip, Input Group.
    Use the KbdGroup component to group Kbd components together.

32. Label - Renders an accessible label associated with controls.

33. Menubar - A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
    It can have MenubarMenu (which has MenubarTrigger and MenubarContent (has MenubarItem, MenubarSeparator and MenubarSub and a lot more)).

34. Native Select (prefer Select) - A styled native HTML select element with consistent design system integration.

35. Navigation Menu - A collection of links for navigating websites.

36. Pagination - Pagination with page navigation, next and previous links.
    It has PaginationContent (which has PaginationItem (have PaginationPrevious, PaginationLink, PaginationEllipsis and PaginationNext)).

37. Popover - Displays rich content in a portal, triggered by a button.
    It PopoverTrigger and PopoverContent (can have any component like button, label, input).

38. Progress - Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

39. Radio Group - A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
    It has RadioGroupItem and Label inside a div.

40. Resizable - Accessible resizable panel groups and layouts with keyboard support.

41. Scroll Area - Augments native scroll functionality for custom, cross-browser styling.
    It has div component anything inside the div.

42. Select - Displays a list of options for the user to pick from—triggered by a button.
    It has SelectTrigger (SelectValue) and SelectContent (which has multiple SelectItem).
    SelectContent can multiple SelectGroup (can have a SelectLabel and multiple SelectItem).

43. Separator - Visually or semantically separates content.
    Just use <Separator /> anywhere.

44. Sheet - Extends the Dialog component to display content that complements the main content of the screen.
    It has SheetTrigger (which has Button asChild) and SheetContent (which has SheetHeader ( have SheetTitle and SheetDescription), a div component with text and SheetFooter (have Button and SheetClose with Button asChild)).
    Use the side prop on SheetContent to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.
    Use showCloseButton={false} on SheetContent to hide the close button.

45. Sidebar - A composable, themeable and customizable sidebar component.

46. Skelton - Use to show a placeholder while content is loading.

47. Slider - An input where the user selects a value from within a given range.
    Just add the below component.

48. Sonner - An opinionated toast component for React.
    Once add Toaster in layout.tsx and then just use toast("Event has been created.")
    To use toaster other than default, just toast.success or .info or .warning or .error or .promise
    You can also add description and position to the toast.

49. Spinner - An indicator that can be used to show a loading state.
    You can customize this for using icon of your choice.
    It has example with different sizes, spinner inside button, spinner inside badge, spinner inside empty group or spinner inside empty.

50. Switch - A control that allows the user to toggle between checked and not checked.
    It has example with description, choice card, disabled, invalid and size.

51. Table - A responsive table component.

52. Tabs - A set of layered sections of content—known as tab panels—that are displayed one at a time.
    It has TabsList (which has multiple TabsTrigger) and multiple TabsContent.
    Use the variant="line" prop on TabsList for a line style.

    Use orientation="vertical" for vertical tabs.
    We can disable any tab and can display icons inside TabsTrigger.

53. Textarea - Displays a form textarea or a component that looks like a textarea.
    It has examples for Field, Disabled, Invalid and Button.
    Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.
    Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.
    Pair with Button to create a textarea with a submit button.

54. Toggle Group - (component for star, like and bookmark) A set of two-state buttons that can be toggled on or off.
    It has example for outline, size, spacing, vertical, disabled.

55. Toggle - add features like bookmark, upvote (A two-state button that can be either on or off.)
    It has examples for Outline, with text, size, disabled.

56. Tooltip - A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
    It has TooltipTrigger and TooltipContent.
    Use the side prop to change the position of the tooltip.

    It has example for using it with keyboard icon and disabled button.

57. Typography - Styles for headings, paragraphs, lists... etc.

Charts

Data Table

Powerful table and datagrids built using TanStack Table.

Install the table component and tanstack table using

bunx --bun shadcn@latest add table

bun add @tanstack/react-table

Field

The Field family is designed for composing accessible forms. A typical field is structured as follows:

<Field>
  <FieldLabel htmlFor="input-id">Label</FieldLabel>
  {/* Input, Select, Switch, etc. */}
  <FieldDescription>Optional helper text.</FieldDescription>
  <FieldError>Validation message.</FieldError>
</Field>

• Field is the core wrapper for a single field.

• FieldContent is a flex column that groups label and description. Not required if you have no description.

• Wrap related fields with FieldGroup, and use FieldSet with FieldLegend for semantic grouping.

• Choice Card - Wrap Field components inside FieldLabel to create selectable field groups. This works with RadioItem, Checkbox and Switch components.

• Field Group - Stack Field components with FieldGroup. Add FieldSeparator to divide them.

• Vertical fields: Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.

• Horizontal fields: Set orientation="horizontal" on Field to align the label and control side-by-side. Pair with FieldContent to keep descriptions aligned.

• Responsive fields: Set orientation="responsive" for automatic column layouts inside container-aware parents. Apply @container/field-group classes on FieldGroup to switch orientations at specific breakpoints.

• For more details, Read Forms documentation.