shadcn, benim de React projelerinde sıklıkla kullandığım, hem tutarlı UI standartları hem de daha hızlı geliştirme süreçleri sunan bir kütüphane. Özellikle erişilebilirlik, tema desteği ve bileşenlerin kolay özelleştirilebilmesi gibi avantajlar, daha hızlı ve daha sürdürülebilir ürünler geliştirilebilmesine olanak tanıyor.
Bugün sizlerle, shadcn kütüphanesine yakın zamanda eklenen 7 yeni componenti detaylı olarak inceleyeceğiz.
1. Spinner
Eskiden bir yükleme animasyonu göstermek için ya bir ikona Tailwind sınıflarıyla animasyon ekliyor ya da ekstra bir paket kuruyorduk, <Spinner /> componenti ise bu ihtiyacı ortadan kaldırıyor.
<div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
<Item variant="muted">
<ItemMedia>
<Spinner />
</ItemMedia>
<ItemContent>
<ItemTitle className="line-clamp-1">Processing payment...</ItemTitle>
</ItemContent>
<ItemContent className="flex-none justify-end">
<span className="text-sm tabular-nums">$100.00</span>
</ItemContent>
</Item>
</div>(bkz. https://ui.shadcn.com/docs/components/spinner)
2. Kbd
Kbd, kullanıcı arayüzünde klavye kısayollarını göstermek için özel olarak tasarlanmış bir component. Daha önce bu amaçla Badge gibi genel bileşenler kullanılıyordu, Kbd componenti ise artık hem semantik açıdan doğru hem de daha şık bir çözüm sunuyor.
<div className="flex flex-col items-center gap-4">
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⌃</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>Ctrl</Kbd>
<span>+</span>
<Kbd>B</Kbd>
</KbdGroup>
</div>(bkz. https://ui.shadcn.com/docs/components/kbd)
3. Button Group
Daha önce birbiriyle alakalı butonları gruplamayı denediyseniz, karmaşık CSS ve yorucu sınır yönetimiyle uğraşmak zorunda kalmışsınızdır. Button Group ise bu zorluğu ortadan kaldırıyor. Bir konteyner gibi davranarak içine eklenen tüm butonların (hatta drop-down menülerin) görsel olarak birleşmesini sağlıyor.
<ButtonGroup
orientation="vertical"
aria-label="Media controls"
className="h-fit"
>
<Button variant="outline" size="icon">
<PlusIcon />
</Button>
<Button variant="outline" size="icon">
<MinusIcon />
</Button>
</ButtonGroup>(bkz. https://ui.shadcn.com/docs/components/button-group)
4. Input Group
Inputların içine veya etrafına ikon, metin veya buton eklerken, genellikle absolute positioning ve padding değerleriyle mücadele etmek gerekiyordu. Input Group bu yapıyı standartlaştırıyor, konumlandırma problemlerini ortadan kaldırarak hem Input hem de Text Area gibi alanların etrafında temiz ve karmaşık olmayan UIlar oluşturmayı mümkün kılıyor.
<div className="grid w-full max-w-sm gap-6">
<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupInput type="email" placeholder="Enter your email" />
<InputGroupAddon>
<MailIcon />
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupInput placeholder="Card number" />
<InputGroupAddon>
<CreditCardIcon />
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<CheckIcon />
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupInput placeholder="Card number" />
<InputGroupAddon align="inline-end">
<StarIcon />
<InfoIcon />
</InputGroupAddon>
</InputGroup>
</div>(bkz. https://ui.shadcn.com/docs/components/input-group)
5. Field
Field, form oluşturma yaklaşımını yeniden tanımlayan, yeni componentler arasında en gözde component olabilir. En büyük avantajı, React Hook Forms veya TanStack Form gibi spesifik form kütüphanelerine bağımlı olmaması diyebilirim.
<div className="w-full max-w-md">
<FieldSet>
<FieldGroup>
<Field>
<FieldLabel htmlFor="username">Username</FieldLabel>
<Input id="username" type="text" placeholder="Max Leiter" />
<FieldDescription>
Choose a unique username for your account.
</FieldDescription>
</Field>
<Field>
<FieldLabel htmlFor="password">Password</FieldLabel>
<FieldDescription>Must be at least 8 characters long.</FieldDescription>
<Input id="password" type="password" placeholder="********" />
</Field>
</FieldGroup>
</FieldSet>
</div>(bkz. https://ui.shadcn.com/docs/components/field)
6. Item
Item, listeler veya kartlar gibi tekrar eden içerikler için tasarlanmış esnek bir konteynerdir. Projelerde sürekli tekrarlanan div ve flex yapılarının yerine geçerek, standart ve duyarlı kart veya liste görünümlerini hızlıca oluşturmayı sağlar.
<div className="flex w-full max-w-md flex-col gap-6">
<Item variant="outline">
<ItemContent>
<ItemTitle>Basic Item</ItemTitle>
<ItemDescription>
A simple item with title and description.
</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="outline" size="sm">
Action
</Button>
</ItemActions>
</Item>
<Item variant="outline" size="sm" asChild>
<a href="#">
<ItemMedia>
<BadgeCheckIcon className="size-5" />
</ItemMedia>
<ItemContent>
<ItemTitle>Your profile has been verified.</ItemTitle>
</ItemContent>
<ItemActions>
<ChevronRightIcon className="size-4" />
</ItemActions>
</a>
</Item>
</div>(bkz. https://ui.shadcn.com/docs/components/item)
7. Empty
404 gibi yokluk durumlarında ya da veri bulunmadığında (örneğin 'Hiç gönderi oluşturulmadı'), kullanıcıya bilgilendirici bir uyarı göstermek için kullanılır.
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<IconFolderCode />
</EmptyMedia>
<EmptyTitle>No Projects Yet</EmptyTitle>
<EmptyDescription>
You haven't created any projects yet. Get started by creating your
first project.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<div className="flex gap-2">
<Button size="sm">Create Project</Button>
<Button variant="outline">Import Project</Button>
</div>
</EmptyContent>
<Button variant="link" asChild className="text-muted-foreground" size="sm">
<a href="#">
Learn More <ArrowUpRightIcon />
</a>
</Button>
</Empty>(bkz. https://ui.shadcn.com/docs/components/empty)
shadcn’in bu yeni sürümü, özellikle Field, Input Group ve Button Group bileşenleri aracılığıyla yaygın UI problemlerine mimari çözümler sunuyor. Bu araçları kullanmak, kodun daha temiz olmasını sağlarken, React geliştirme sürecinde de kayda değer bir hızlanma getiriyor.
Sonraki yazımda görüşmek üzere. Hoşçakalın…