Refill UI

Refill UI

Modern, özelleştirilebilir React UI bileşenleri kütüphanesi. Web Components desteği ile birlikte gelir.

Bağlantılar

• NPM Package
• GitHub Repository
• Discord
• Docs

Hızlı Başlangıç

Kurulum

npm install refill-ui

Kullanım

import { RfButton, RfIcon, RfBadge, RfInput, RfAlert, RfDropdown, RfDropdownItem } from 'refill-ui';
import 'refill-ui/style';

function App() {
  return (
    <div>
      <RfButton>Hello World</RfButton>
      <RfIcon icon="info" size={24} />
      <RfBadge color="red" size="small">
        Badge
      </RfBadge>
      <RfInput label="Name" placeholder="Enter Your Name" />
      <RfAlert color="success" title="Success" description="This is a success alert" />
      <RfDropdown header="Dropdown Button">
        <RfDropdownItem>Action 1</RfDropdownItem>
        <RfDropdownItem>Action 2</RfDropdownItem>
      </RfDropdown>
    </div>
  );
}

<script src="https://cdn.jsdelivr.net/npm/refill-ui@latest/dist/refill-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/refill-ui@latest/dist/refill-ui.min.css">

<refill-button>Hello World</refill-button>
<refill-icon icon="info" size="24"></refill-icon>
<refill-badge color="red" size="small">Badge</refill-badge>
<refill-input label="Name" placeholder="Enter Your Name"></refill-input>
<refill-alert color="success" title="Success" description="This is a success alert"></refill-alert>

Özellikler

✅ Modern Tasarım - Güncel tasarım trendlerine uygun, modern ve şık komponentler.

✅ Web Components - Framework bağımsız kullanım için Web Components desteği.

✅ Özelleştirilebilir - SCSS değişkenleri ile kolay özelleştirme imkanı.

✅ TypeScript Desteği - Tam TypeScript desteği ile tip güvenliği.

Daha fazla bilgi için dokümantasyona göz atın.