Başlarken

Kurulum

Ladom UI’ı ladom-ui CLI ile bir Next.js uygulamasına ekleyin: tokenları, bileşenleri ve ikonları kodunuza kopyalar.

Gereksinimler

CLI için Node 20 ve sonrası, React 19 ve CSS Modules’ü işleyen bir bundler. Next.js 15 ve sonrası hiçbir ayar gerektirmeden çalışır.

1. Klasörü hazırlayın

init, ladom-ui.json dosyasını yazar ve tokenları components/ladom klasörüne kopyalar (--dir ile değiştirin). Dosyalar sizindir: okuyun, değiştirin, commit edin.

npx ladom-ui init

2. Tokenları ve fontu yükleyin

Tokenları kökte bir kez import edin ve Hanken Grotesk’i <html> üzerinde --font-hanken-grotesk olarak yükleyin. Body’ye zemin ve metin tokenlarını verin.

// app/layout.tsx
import { Hanken_Grotesk } from 'next/font/google';
import '@/components/ladom/tokens/index.css';

const hankenGrotesk = Hanken_Grotesk({
  subsets: ['latin', 'latin-ext'],
  variable: '--font-hanken-grotesk',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={hankenGrotesk.variable}>
      <body style={{ background: 'var(--color-surface-background)', color: 'var(--color-foreground-high-emphasis)' }}>
        {children}
      </body>
    </html>
  );
}

3. Bileşenleri ekleyin

add, adını verdiğiniz bileşenleri, ihtiyaç duydukları parçaları ve ikonlarını kopyalar; components/ladom/index.ts dosyasını günceller.

npx ladom-ui add button input form-field

Pro bileşenler

Pro işaretli bileşenler bir lisans anahtarı ister; onu LADOM_UI_KEY içinde verin. Lisansa bakın.

LADOM_UI_KEY=ldm_pro_… npx ladom-ui add accordion navigation

4. Kullanın

Her şeyi klasörden import edin. Bileşenler sunucu ve istemci bileşenlerinde çalışır; etkileşimli olanlar zaten istemci bileşenidir.

// app/page.tsx
import { Button, FormField, IconAdd, Input } from '@/components/ladom';

export default function Page() {
  return (
    <form>
      <FormField label="Project name" hint="You can change it later">
        <Input name="name" />
      </FormField>
      <Button type="submit" iconLeft={IconAdd}>Create project</Button>
    </form>
  );
}

Toast’lar

Toast’lar uygulamanın çevresinde bir ToastProvider ister; onu bir istemci bileşenine koyup layout’tan çizin.

// app/providers.tsx
'use client';
import { ToastProvider } from '@/components/ladom';

export function Providers({ children }: { children: React.ReactNode }) {
  return <ToastProvider closeLabel="Close">{children}</ToastProvider>;
}

Daha fazla ikon

Bileşenler kullandıkları ikonları getirir. Kendi kodunuz için adıyla daha fazlasını kopyalayın:

npx ladom-ui icons share calendar

Güncelleme

Güncellemeler projenize kendiliğinden gelmez; siz çekersiniz. CLI yazdığı her dosyayı hatırlar: update dokunmadığınız dosyaları yeniler, değiştirdiklerinizi korur. diff kopyanızın son sürümden farkını gösterir; --overwrite yine de son sürümü alır.

npx ladom-ui list      # shows (update available)
npx ladom-ui update    # updates the files you have not changed
npx ladom-ui diff button
npx ladom-ui update button --overwrite

5. Temalar ve modlar

Modları <html> üzerine verin. Cihaz modları, data-device biri zorlamadıkça pencere genişliğini izler (768px altı Mobile, 1280px altı Tablet).

<html data-theme="dark">          {/* Dark theme (opt-in) */}
<html data-density="narrow">      {/* Narrow density */}
<html data-device="mobile">       {/* force a device mode; otherwise it follows the width */}

Kendi stilleriniz

Ekranlarınız aynı ölçeği ve temaları izlesin diye CSS’inizde tokenları kullanın. Tüm tokenlar Foundations altında listelenir.

.card {
  padding: var(--space-medium);
  border-radius: var(--radius-card);
  background: var(--color-surface-level-1);
  box-shadow: var(--shadow-card-style-1);
  font: var(--text-ui-text-regular);
}

Diğer bundler’lar (Vite)

Next.js dışında göreli yollarla import edin, fontu istediğiniz gibi yükleyip değişkeni kendiniz tanımlayın:

// main.tsx
import './components/ladom/tokens/index.css';
import '@fontsource-variable/hanken-grotesk';

document.documentElement.style.setProperty('--font-hanken-grotesk', "'Hanken Grotesk Variable'");

Claude ile

Bir Claude Code skill’i, ladom-ui, Claude’a bileşenleri, tokenları ve kuralları öğretir. npx ladom-ui skill onu projenizin .claude/skills klasörüne ekler.

Sonra

Bileşenlere göz atın; her sayfada bir playground ve API var.