Key Value
Teknik özellik ve değerler için kompakt gösterim.
KeyValue.tsx
Yatay Düzen (Horizontal)
- Çekirdek FrameworkTurbopack + Webpack destekli
- Next.js 16.3.5
- React Sürümü
- React 19 RC
- CSS Altyapısı@tailwindcss/postcss motoru
- Tailwind CSS v4
Dikey Düzen (Vertical Layout)
- Registry Dağıtım Uç Noktası
- https://ui.archintel.dev/r/registry.json
shadcn CLI uyumlu JSON manifest şeması
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/key-value.jsonKullanım Örneği
import { KeyValue } from "@/components/data-display/KeyValue"
<KeyValue label="Ortam" value="Production" status="success" copyable />Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| label | string | — | Definition term etiketi. |
| value | ReactNode | — | Definition değeri. |
| layout | "horizontal" | "vertical" | "horizontal" | Etiket ve değer yerleşimi. |
| copyable | boolean | false | Metinsel değeri kopyalama kontrolü. |
| status | "success" | "warning" | "error" | "sage" | "neutral" | — | Durum noktası. |
| statusLabel | string | — | Durum noktasının erişilebilir adı. |
| helperText | string | — | Yardımcı açıklama. |