Blog

HeroUI Nedir? Başlangıç ​​Seviyesi HeroUI Rehberi

Mark Ponomarev

Mark Ponomarev

12 June 2025

HeroUI Nedir? Başlangıç ​​Seviyesi HeroUI Rehberi
💡
Güzel API Dokümantasyonu oluşturan harika bir API Test Aracı mı istiyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışabileceği entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılıyor ve Postman'ı çok daha uygun bir fiyata değiştiriyor!
button

Frontend geliştiricileri için estetik açıdan hoş, yüksek performanslı ve derinlemesine özelleştirilebilir kullanıcı arayüzlerine olan talep hiç bu kadar yüksek olmamıştı. Geliştiriciler sürekli olarak kalite veya yaratıcı kontrolü feda etmeden iş akışlarını hızlandırabilecek araçlar arıyorlar. Monolitik UI bileşen kütüphaneleri yıllardır topluluğa iyi hizmet etmiş olsa da, yeni bir paradigma ortaya çıkıyor - geliştirici sahipliğini, modülerliği ve modern framework'lerle sorunsuz entegrasyonu önceliklendiren bir paradigma. HeroUI işte bu yeni paradigmada kendi nişini oluşturuyor.

HeroUI sadece başka bir bileşen kütüphanesi değil; doğrudan projelerinize entegre edilmek üzere tasarlanmış, özenle hazırlanmış yeniden kullanılabilir UI bileşenleri koleksiyonudur. Geliştiricilere kod tabanları üzerinde nihai kontrol sağlayan bir felsefeyi savunur. Bir node modülünden opak bileşenleri içe aktarmak yerine, HeroUI Komut Satırı Arayüzü'nü (CLI) kullanarak ihtiyacınız olan bileşenlerin gerçek kaynak kodunu projenize eklersiniz. Bu "kopyala-yapıştır" evrimi, her düğmenin, kartın ve iletişim kutusunun kendi uygulamanızın bir parçası haline gelmesi, belirli ihtiyaçlarınıza göre ayarlanmaya, yeniden biçimlendirilmeye ve uyarlanmaya hazır olması anlamına gelir.

React, Tailwind CSS ve Next.js gibi devlerin omuzlarında yükselen HeroUI, güzel, erişilebilir ve duyarlı kullanıcı arayüzleri oluşturmak için yapı taşlarını sağlar. Hem hızı hem de özgüllüğü önemseyen modern geliştiriciler için tasarlanmıştır, sizi katı bir tasarım sistemine kilitlemeyen sağlam bir başlangıç noktası sunar. Bu makale, HeroUI'nin temel prensiplerini anlamak, projenize kurmak, görünümünü ve hissini özelleştirmek ve yeni nesil web uygulamaları oluşturmak için güçlü CLI'sından yararlanmak için kapsamlı bir rehber görevi görecektir.

Bölüm 1: HeroUI'yi Anlamak - Felsefesi ve Temel Özellikleri

Kurulum ve kullanımın teknik ayrıntılarına dalmadan önce, HeroUI'nin "neden"ini anlamak çok önemlidir. Hangi sorunları çözer ve kalabalık UI araçları alanında onu cazip bir seçim yapan nedir?

Felsefe: Sahiplik ve Ödün Verilmeyen Özelleştirme

HeroUI ile Material-UI veya Ant Design gibi geleneksel UI kütüphaneleri arasındaki temel fark, sahiplik kavramında yatar. Geleneksel bir kütüphane kurduğunuzda, package.json dosyanıza bir bağımlılık eklersiniz. Uygulamanız daha sonra bu paketten önceden derlenmiş bileşenleri içe aktarır. Bu uygun olsa da, çeşitli dezavantajları vardır:

  1. Sınırlı Özelleştirme: Stil geçersiz kılmaları karmaşık olabilir, genellikle kütüphanenin varsayılan stilleriyle !important etiketleri veya dolambaçlı tema sağlayıcı yapılandırmalarıyla savaşmanızı gerektirir.
  2. Kara Kutu Bileşenleri: Bileşenlerin iç mantığı node_modules klasöründe gizlenmiştir. Beklenmeyen davranışı ayıklamak veya iç işleyişi anlamak önemli ölçüde zorlaşır.
  3. Paket Boyutu Şişkinliği: Genellikle tüm kütüphaneyi veya en azından önemli bir kısmını, sadece birkaç bileşen kullansanız bile içe aktarırsınız, bu da uygulamanızın nihai paket boyutunu potansiyel olarak artırır.
  4. Bağımlılık Cehennemi: Kütüphanenin güncelleme döngüsüne ve bağımlılıklarına tabisiniz. Kütüphanedeki kırıcı bir değişiklik, uygulamanızda büyük bir yeniden düzenlemeyi zorlayabilir.

HeroUI bu sorunları tamamen aşar. CLI'nın bileşenin kaynak kodunu doğrudan projenizin dizinine (örneğin, /components/ui) yerleştirmesi, sizi çeşitli önemli yollarla güçlendirir:

Bu felsefe, ürünleri için sıfırdan başlamadan benzersiz bir tasarım sistemi oluşturmak isteyen geliştiricilere ve ekiplere yöneliktir. Temel, stilize edilmemiş (veya hafifçe stilize edilmiş) ilkel öğeleri sağlar ve marka kimliğini siz sağlarsınız.

Başlıca Özellikler Bir Bakışta

HeroUI, kurulum yönteminden daha fazlasıdır. Modern bir geliştirme iş akışı için tasarlanmış özelliklerle doludur.

HeroUI Kimler İçin?

HeroUI, belirli bir geliştirici ve proje türü için ideal bir seçimdir:

Minimal yapılandırma gerektiren, daha "kutudan çıktığı gibi", pilleri dahil bir çözüm tercih eden mutlak başlangıçlar için daha az uygun olabilir. HeroUI'nin gücü, Tailwind CSS ve modern ön uç geliştirme ortamı hakkında temel bir anlayış gerektiren yapılandırılabilirliğinde yatar.

Bölüm 2: Başlangıç - Kurulum ve Ayarların Ayrıntılı Anlatımı

Şimdi felsefeyi anladığımıza göre, ellerimizi kirletelim. Bu bölüm, HeroUI'yi yeni veya mevcut bir projeye entegre etmek için titiz, adım adım bir rehber sunar. Önerilen ve en etkili yöntem, resmi HeroUI CLI'sini kullanmaktır.

Ön Koşullar

Başlamadan önce, geliştirme ortamınızın aşağıdaki gereksinimleri karşıladığından emin olun:

npx create-next-app@latest my-heroui-app

Next.js kurulumu sırasında, HeroUI ekosisteminin temelini oluşturduğu için TypeScript ve Tailwind CSS'i seçmeniz önerilir.

HeroUI CLI init Komutu: Başlangıç Noktanız

init komutu, HeroUI dünyasına büyülü giriş noktasıdır. Projenizi akıllıca inceler, size bir dizi soru sorar ve ardından ihtiyacınız olan her şeyi otomatik olarak yapılandırır.

Proje dizininize gidin:Bash

cd my-heroui-app

Şimdi başlatma komutunu çalıştırın:Bash

npx heroui-cli@latest init

CLI şimdi kurulum sürecinde size rehberlik edecektir. Sorduğu her soruyu ve seçimlerinizin ne anlama geldiğini inceleyelim.

1. "Hangi stili kullanmak istersiniz?"

2. "Temel renk olarak hangi rengi kullanmak istersiniz?"

3. "Global CSS dosyanız nerede?"

4. "Renkler için CSS değişkenlerini kullanmak istiyor musunuz?"

5. "tailwind.config.js dosyanız nerede?"

6. "Bileşenler için içe aktarma takma adını yapılandırın:"

7. "Yardımcılar için içe aktarma takma adını yapılandırın:"

8. "React Server Components kullanıyor musunuz?"

Tüm soruları yanıtladıktan sonra, CLI sihrini gerçekleştirecektir. Şunları yapacaktır:

Projeniz artık HeroUI için tamamen yapılandırılmıştır.

Değişikliklerin Yapısı

CLI'nın değiştirdiği veya oluşturduğu temel dosyalara daha yakından bakalım.

components.json

Bu dosya, projenizdeki HeroUI için manifesttir. init işlemi sırasında yaptığınız seçimleri saklar ve CLI'ya projenizin nasıl yapılandırıldığını söyler.JSON

{
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "utils": "@/lib/utils",
    "components": "@/components"
  }
}

Bu dosyayı manuel olarak düzenlemenize nadiren ihtiyacınız olacaktır, ancak amacını anlamak faydalıdır. CLI'nın işlemlerinin beynidir.

tailwind.config.js

Tailwind yapılandırmanız şöyle görünecek şekilde genişletilecektir. Temel eklemeler theme uzantıları ve tailwindcss-animate eklentisidir.JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        // ... ve CSS değişkenlerine bağlı çok daha fazla renk tanımı
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ...
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        // ... animasyonlar için keyframes
      },
      animation: {
        // ... animasyon yardımcıları
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

primary gibi renklerin bir hex koduyla değil, hsl(var(--primary)) ile tanımlandığına dikkat edin. Bu, Tailwind'e global CSS'nizde tanımlanan --primary adlı CSS değişkenini kullanmasını söyler.

app/globals.css

Bu dosya artık tasarım sisteminizin temasının kalbidir. Temel Tailwind direktiflerini ve büyük bir CSS değişkenleri bloğunu içerecektir.CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    /* ... açık tema için çok daha fazla değişken */
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    /* ... karanlık tema için çok daha fazla değişken */
  }
}

Burada bu kurulumun gücünü görebilirsiniz. Tüm açık tema renkleriniz :root kapsamı içinde tanımlanır ve tüm karanlık tema renkleriniz .dark sınıf kapsamı içinde tanımlanır. .dark sınıfı <html> öğesine eklendiğinde, tarayıcı otomatik olarak karanlık tema değişkenlerini kullanacaktır.

Bölüm 3: Özelleştirmede Ustalaşma - Tema, Düzen ve Karanlık Mod

HeroUI başlatıldıktan sonra gerçek eğlence başlar: onu kendinize ait kılmak. Mimari, derin ve sezgisel özelleştirme için açıkça tasarlanmıştır.

CSS Değişkenleriyle Tema Oluşturma Sanatı

HeroUI'de tema oluşturma, diğer kütüphanelerde bulabileceğiniz karmaşık JavaScript tabanlı tema nesnelerinden bir ayrılıştır. Daha basit, daha güçlüdür ve modern CSS özelliklerinden yararlanır. Tüm tema - renkler, kenarlık yarıçapları, fontlar - globals.css dosyanızda tanımlanan CSS değişkenleri tarafından kontrol edilir.

Renkleri Değiştirme

Birincil marka renginizi değiştirmek istediğinizi varsayalım. Tailwind yapılandırmasına girmenize gerek yok. Sadece globals.css dosyasındaki ilgili CSS değişkenlerini bulup değerlerini değiştirmeniz yeterlidir.

Renkler HSL (Ton, Doygunluk, Açıklık) değerleri kullanılarak tanımlanır, ancak hsl() sarmalayıcısı olmadan. Örneğin:CSS

:root {
  /* ... */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

.dark {
  /* ... */
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

Birincil renginizi canlı bir yeşile değiştirmek için, seçtiğiniz tonun HSL değerlerini bulmak ve değişkenleri güncellemek için çevrimiçi bir renk seçici kullanabilirsiniz:CSS

/* globals.css içinde */
:root {
  /* ... */
  --primary: 142.1 76.2% 36.3%; /* Yeni Yeşil Birincil Renk */
  --primary-foreground: 355.7 100% 97.3%; /* Birincil renk üzerinde metin için kontrast oluşturan açık renk */
  /* ... */
}

.dark {
  /* ... */
  --primary: 142.1 70.2% 46.3%; /* Karanlık mod için biraz farklı bir yeşil */
  --primary-foreground: 355.7 100% 97.3%;
  /* ... */
}

Bu dosyayı kaydettiğinizde, "primary" rengini kullanan her bileşen (<Button> gibi) uygulamanızın tamamında anında güncellenerek bu yeni yeşil rengi yansıtacaktır. Bu inanılmaz derecede güçlüdür.

Kenarlık Yarıçapını Değiştirme

Kartlar ve girişler gibi bileşenlerin köşelerinin yuvarlaklığı tek bir CSS değişkeni tarafından kontrol edilir: --radius.CSS

/* globals.css içinde */
:root {
  /* ... */
  --radius: 0.5rem; /* Varsayılan değer */
}

Daha keskin, daha köşeli bir görünüm tercih ediyorsanız, bu değeri azaltabilirsiniz:CSS

:root {
  --radius: 0.25rem; /* Daha az yuvarlak */
}

Veya çok yumuşak, yuvarlak bir estetik için artırabilirsiniz:CSS

:root {
  --radius: 1.5rem; /* Çok yuvarlak */
}

Bu tek satırlık değişiklik, tüm bileşenlerinizde yayılacak ve tüm kullanıcı arayüzünüzde tutarlı bir kenarlık yarıçapı sağlayacaktır.

Yeni Renkler Ekleme

init komutu tarafından sağlanan renklerle sınırlı değilsiniz. Kendi anlamsal renklerinizi kolayca ekleyebilirsiniz. Örneğin, bir "özel" marka rengi ekleyelim.

globals.css dosyasında CSS değişkenlerini tanımlayın:CSS

/* globals.css içinde */
:root {
  /* ... */
  --special: 320 86% 59%;
  --special-foreground: 330 100% 98%;
}
.dark {
  /* ... */
  --special: 320 80% 69%;
  --special-foreground: 330 100% 98%;
}

Bunları tailwind.config.js dosyasında Tailwind'e gösterin:JavaScript

// tailwind.config.js içinde
// ...
extend: {
  colors: {
    // ...
    special: {
      DEFAULT: "hsl(var(--special))",
      foreground: "hsl(var(--special-foreground))",
    },
  },
},
// ...

Artık bu renkleri bileşenlerinizde Tailwind'in utility sınıfları ile kullanabilirsiniz, örneğin bg-special ve text-special-foreground.

Duyarlı Düzenler Oluşturma

HeroUI bileşenleri, doğası gereği duyarlı olan Tailwind CSS ile inşa edilmiştir. Bir bileşenin stilini farklı ekran boyutlarında değiştirmek için herhangi bir utility sınıfında Tailwind'in duyarlı ön eklerini (sm:, md:, lg:, xl:) kullanabilirsiniz.

Masaüstünde görünür olan ancak mobilde daralan bir kenar çubuğu ile basit bir sayfa düzeni oluşturduğumuzu hayal edelim. HeroUI düşük seviyeli bileşenleri (Card, Button) sağlarken, bunları daha büyük bir düzende birleştirmek sizin sorumluluğunuzdadır.

İşte bunu bir Next.js sayfa bileşeninde nasıl yapılandırabileceğinize dair bir örnek:TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function DashboardPage() {
  return (
    <div className="flex min-h-screen flex-col md:flex-row">
      {/* Kenar Çubuğu */}
      <aside className="w-full border-b bg-muted p-4 md:w-64 md:border-b-0 md:border-r">
        <h2 className="text-lg font-semibold">Navigasyon</h2>
        <nav className="mt-4 flex flex-row space-x-2 md:flex-col md:space-x-0 md:space-y-2">
          <Button variant="ghost" className="justify-start">Dashboard</Button>
          <Button variant="ghost" className="justify-start">Ayarlar</Button>
          <Button variant="ghost" className="justify-start">Profil</Button>
        </nav>
      </aside>

      {/* Ana İçerik */}
      <main className="flex-1 p-8">
        <h1 className="text-4xl font-bold tracking-tight">Dashboard</h1>
        <p className="mt-2 text-muted-foreground">
          Kontrol panelinize hoş geldiniz.
        </p>
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle>Gelir</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">$45,231.89</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Abonelikler</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+2350</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Aktif Kullanıcılar</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+573</p>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}

Bu örnekte:

Bu, temel prensibi gösterir: HeroUI stilize edilmiş ilkel öğeleri (Card, Button) sağlar ve siz bunları duyarlı, karmaşık düzenlere yerleştirmek için Tailwind CSS'in tüm gücünü kullanırsınız.

Kusursuz Karanlık Mod Uygulama

HeroUI'nin en zarif özelliklerinden biri, karanlık mod için yerleşik desteğidir. init komutu zaten hem açık (:root) hem de karanlık (.dark) temalar için renk değişkenlerini ayarladığı için, bunu uygulamak şaşırtıcı derecede basittir.

En yaygın yaklaşım, tema geçişini yöneten ve kullanıcının seçimini yerel depolamada saklayan next-themes paketini kullanmaktır.

next-themes'i kurun:Bash

npm install next-themes

Tema Sağlayıcı Oluşturun:

Örneğin, components/theme-provider.tsx adresinde yeni bir dosya oluşturun.TypeScript

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Kök Düzeninizi Sağlayıcı ile Sarın:

Next.js kök düzeninizde (app/layout.tsx), ThemeProvider'ı içe aktarın ve kullanın.TypeScript

import { ThemeProvider } from "@/components/theme-provider";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Buradaki temel prop'lar:

Bir Tema Değiştirme Düğmesi Oluşturun:

Şimdi, kullanıcının temaları değiştirmesine olanak tanıyan bir UI öğesine ihtiyacınız var.TypeScript

"use client";

import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";

export function ModeToggle() {
  const { setTheme, theme } = useTheme();

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <Button variant="outline" size="icon" onClick={toggleTheme}>
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Temayı değiştir</span>
    </Button>
  );
}

Bu1 bileşen, mevcut temayı kontrol etmek ve yeni bir tema ayarlamak için next-themes'ten useTheme hook'unu kullanır. Dönen güneş ve ay simgeleri güzel bir görsel geçiş sağlar. Bu <ModeToggle /> bileşenini kullanıcı arayüzünüzde bir yere (başlık gibi) yerleştirmeniz yeterlidir ve tamamen işlevsel, kalıcı bir karanlık mod değiştirme düğmesine sahip olursunuz.

Bölüm 4: HeroUI CLI ve Bileşen Odaklı İş Akışı

heroui-cli sadece bir yükleyici değildir. Bileşen kütüphanenizi yönetmek ve büyütmek için kullanacağınız birincil araçtır. Başlatmadan sonraki ana amacı, projenize yeni bileşenler eklemektir.

Bileşen Ekleme: Temel İş Akışı

Uygulamanız için bir iletişim kutusu (modal) gerektiğini varsayalım. Sıfırdan yazmak yerine, CLI'dan HeroUI'nin önceden oluşturulmuş, erişilebilir Dialog bileşenini eklemesini isteyebilirsiniz.

Komut basittir:Bash

npx heroui-cli@latest add dialog

CLI aşağıdaki eylemleri gerçekleştirecektir:

  1. Projenizin yapısını (yol takma adları, TypeScript kullanımı vb.) anlamak için components.json dosyanızı okur.
  2. Dialog bileşeninin ve bağımlılıklarının (örneğin, Dialog, Button'a bağlı olabilir) en son kaynak kodunu getirir.
  3. Bileşen dosyalarını doğrudan bileşenler dizininize yerleştirir, örneğin: components/ui/dialog.tsx.
  4. Yüklemeniz gerekebilecek diğer bağımlılıklar hakkında sizi bilgilendirir.

Artık projenizde bir dialog.tsx dosyanız var. Kodunu inceleyebilir, ondan öğrenebilir ve hatta değiştirebilirsiniz. Varsayılan Dialog'un beğenmediğiniz bir geçişi varsa, dosyayı açıp animasyonu kontrol eden Tailwind sınıflarını değiştirebilirsiniz. Bu kontrol düzeyi, HeroUI deneyiminin temel taşıdır.

Birden fazla bileşeni aynı anda ekleyebilirsiniz:Bash

npx heroui-cli@latest add card button input label

Bu komut, dört bileşenin tamamını ve bağımlılıklarını tek seferde projenize ekleyecektir.

CLI API'sini Anlamak: components.json

components.json dosyası, projeniz ile HeroUI CLI arasındaki sözleşmedir. CLI'nın davranışını nasıl etkilediklerini anlamak için özelliklerini tekrar gözden geçirelim.

Bu yapılandırmayı anlayarak, projenizin yapısını yeniden düzenlemeye karar verirseniz (örneğin, bileşenler dizininizi @/components'ten @/ui'ye taşımak gibi) CLI'nın davranışını manuel olarak ayarlayabilirsiniz.

Sonuç: HeroUI ile Kendi Yolunuzu İnşa Edin

HeroUI, geliştiricilerin UI kütüphaneleri hakkında düşünme ve kullanma biçiminde önemli bir değişim temsil eder. Tek tip, kara kutu modelinden uzaklaşarak şeffaf, güçlendirici ve derinlemesine özelleştirilebilir bir geliştirici deneyimine doğru ilerler. Stilize edilmemiş, erişilebilir bileşenleri doğrudan kaynak kodu olarak sağlayarak, hızlı geliştirme ve özel tasarım arasında mükemmel bir denge kurar.

HeroUI'nin temel güçleri açıktır:

HeroUI, kullanıcı arayüzlerinin ürünlerinin kimliğinin temel bir parçası olduğuna inanan inşaatçılar, zanaatkarlar ve ekipler içindir. Size bitmiş bir ev vermez; size en yüksek kaliteli malzemeleri ve hayallerinizdeki evi inşa etmek için mükemmel şekilde düzenlenmiş bir atölye sunar. Benzersiz, cilalı ve sürdürülebilir bir ön uç gerektiren bir sonraki projeniz için HeroUI'den başkasına bakmayın. Henüz en kahraman UI'nızı inşa etmenizi sağlayacak araç olabilir.

💡
Güzel API Dokümantasyonu oluşturan harika bir API Test Aracı mı istiyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışabileceği entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılıyor ve Postman'ı çok daha uygun bir fiyata değiştiriyor!
button

API Tasarım-Öncelikli Yaklaşımı Apidog'da Uygulayın

API'leri oluşturmanın ve kullanmanın daha kolay yolunu keşfedin

Ücretsiz Kaydolİndir