Mengenal Shdcn UI library tailwinds

RoisDev — Thu, 28 Aug 2025 06:37:36 +0000

🔹 Apa itu Shadcn UI?

Shadcn UI adalah sebuah UI component library berbasis Tailwind CSS yang dikembangkan oleh shadcn. Tidak seperti library UI lainnya yang menyediakan paket NPM siap pakai, Shadcn UI lebih berfokus pada konsep copy and paste komponen ke dalam project kita.

Dengan pendekatan ini, developer memiliki kontrol penuh atas kode komponen yang digunakan. Jadi, setiap komponen bukan hanya sekadar “black box”, tetapi dapat dimodifikasi sesuai kebutuhan.

🔹 Keunggulan Shadcn UI

Fleksibilitas Tinggi
Semua kode komponen dapat disesuaikan karena langsung ada di dalam project.

Integrasi dengan Tailwind CSS
Dibangun sepenuhnya dengan utility class Tailwind, sehingga mudah dipadukan dengan style yang sudah ada.

Menggunakan Radix UI
Banyak komponennya memanfaatkan Radix Primitives, yang sudah terbukti accessible dan konsisten.

Tidak Mengunci ke dalam Library Tertentu
Karena tidak terpasang melalui NPM, kita tidak terikat versi tertentu dari library. Kita bebas mengedit sesuai kebutuhan.

Komunitas Aktif
Banyak contoh, dokumentasi, dan template yang tersedia karena library ini populer di kalangan developer modern.

🔹 Cara Install Shadcn UI

Shadcn UI tidak di-install seperti library lain, tetapi menggunakan CLI yang akan membantu meng-generate komponen.

Pastikan Tailwind sudah terpasang dalam project.
Contoh setup di Next.js:

npx create-next-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install Shadcn CLI

npx shadcn-ui init

Tambahkan Komponen
Contoh menambahkan button:

npx shadcn-ui add button

Gunakan di Project
Setelah ditambahkan, kamu akan punya folder

components/ui/button.tsx yang siap digunakan:

import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button>Click Me</Button>
}

🔹 Contoh Komponen Shadcn UI

Button

<Button variant="default">Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Delete</Button>

Input dengan Icon

<div className="flex items-center space-x-2">
  <Input placeholder="Cari sesuatu..." />
  <Button>Search</Button>
</div>

Card

<Card>
  <CardHeader>
    <CardTitle>Profil</CardTitle>
    <CardDescription>Informasi pengguna</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Nama: Muhammad Rois</p>
    <p>Role: Software Engineer</p>
  </CardContent>
</Card>

🔹 Kapan Sebaiknya Menggunakan Shadcn UI?

Jika kamu menggunakan Tailwind CSS dan ingin komponen siap pakai tapi tetap fleksibel.

Jika kamu ingin menghindari “lock-in” library UI tertentu seperti Material UI atau Chakra UI.

Jika kamu suka kontrol penuh terhadap kode UI agar mudah disesuaikan.

🔹 Kesimpulan

Shadcn UI adalah solusi tepat bagi developer yang ingin menggabungkan fleksibilitas Tailwind CSS dengan komponen siap pakai yang konsisten. Dengan pendekatan copy-paste komponen, developer punya kebebasan penuh untuk mengedit, memperluas, dan menyesuaikan UI sesuai kebutuhan project.

Bagi seorang frontend developer, menguasai Shadcn UI dapat mempercepat workflow sekaligus menjaga konsistensi desain aplikasi.

3 Library Talwinds css + framer motion

RoisDev — Mon, 09 Dec 2024 14:50:21 +0000

1.Eceternity UI

Aceternity UI menyediakan komponen-komponen Tailwind CSS dan Framer Motion yang siap digunakan untuk proyek React Anda. Pustaka ini menawarkan komponen yang indah dan responsif, memudahkan pengembang untuk membangun antarmuka pengguna yang menarik dengan cepat

2.Magic UI

Magic UI adalah pustaka UI yang dirancang untuk Design Engineers, menawarkan lebih dari 50 komponen animasi yang gratis dan open-source. Dibangun dengan React, TypeScript, Tailwind CSS, dan Framer Motion, Magic UI memudahkan integrasi dan kustomisasi komponen animasi dalam proyek Anda

3.Eldora UI

Eldora UI adalah pustaka UI open-source yang menyediakan komponen animasi yang dapat digunakan kembali. Dibangun dengan React, TypeScript, Tailwind CSS, dan Framer Motion, Eldora UI sepenuhnya dapat disesuaikan dan dirancang untuk membantu pengembang membangun antarmuka web yang menarik dan responsif.
ELDORAUI

Ketiga pustaka ini memanfaatkan kombinasi Tailwind CSS untuk styling dan Framer Motion untuk animasi, memberikan fleksibilitas dan efisiensi dalam pengembangan antarmuka pengguna yang modern dan interaktif.

DEV Community: RoisDev

Mengenal Shdcn UI library tailwinds

3 Library Talwinds css + framer motion