Shadcn Ui

Table of Contents

How to use Shadcn UI with NextJS project.

ShadcnUI give a premium look to your frontend.

Ofcourse this can be known from the official site

Here is the quicky command to easily setup the basic shadcn.

Complete information is here

$ npx shadcn-ui@latest init && npx shadcn-ui@latest add button select label 

You can add more elements too.


◯   accordion
◯   alert
◯   alert-dialog
◯   aspect-ratio
◯   avatar
◯   badge
◯   breadcrumb
◯   button
◯   calendar
◯   card
◯   carousel
◯   checkbox
◯   collapsible
◯   command
◯   context-menu
◯   dialog
◯   drawer
◯   dropdown-menu
◯   form
◯   hover-card
◯   input
◯   input-otp
◯   label
◯   menubar
◯   navigation-menu
◯   pagination
◯   popover
◯   progress
◯   radio-group
◯   resizable
◯   scroll-area
◯   select
◯   separator
◯   sheet
◯   skeleton
◯   slider
◯   sonner
◯   switch
◯   table
◯   tabs
◯   textarea
◯   toast
◯   toggle
◯   toggle-group
◯   tooltip

Simple text

accordion alert alert-dialog aspect-ratio avatar badge breadcrumb button calendar card carousel checkbox collapsible command context-menu dialog drawer dropdown-menu form hover-card input input-otp label menubar navigation-menu pagination popover progress radio-group resizable scroll-area select separator sheet skeleton slider sonner switch table tabs textarea toast toggle toggle-group tool

Maybe you want it all.

Tags :