avt-rct-lib

React component library dengan desain macOS/iOS. Hanya butuh Tailwind CSS — tanpa Radix UI, tanpa library komponen lain.

📦 npmjs.com/package/avt-rct-lib · 🌐 avt-rct-dashboard.vercel.app

Install

npm install avt-rct-lib
# atau
bun add avt-rct-lib
# atau
pnpm add avt-rct-lib

Setup

1. Tailwind Config

Tambahkan path library ke content agar Tailwind men-scan class yang digunakan:

// tailwind.config.js
export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/avt-rct-lib/dist/**/*.js',
  ],
}

2. Import CSS

Import satu kali di entry point aplikasi (animasi & scrollbar macOS-style):

// main.tsx
import 'avt-rct-lib/styles'

3. Gunakan komponen

import { Button, Badge, Card, Sidebar, toast, Toaster } from 'avt-rct-lib'

// Pasang Toaster di root layout
<Toaster position="bottom-right" />

// Gunakan komponen
<Button variant="primary">Simpan</Button>
<Badge variant="success" dot>Online</Badge>
toast({ title: 'Berhasil!', variant: 'success' })

Komponen

| Komponen | Deskripsi | |---|---| | Button | 6 variant, 5 ukuran, loading state, icon support | | Badge | 7 variant warna + dot indicator | | Input / Textarea | Label, hint, error state, addons kiri/kanan | | Card | Padding variant, hover effect, glass morphism | | Tabs | 3 variant: pills, underline, segment — scroll horizontal mobile | | MenuRoot | Dropdown via createPortal — tidak terhalangi overflow/z-index | | Sheet / Drawer | Slide panel right/left/bottom via createPortal | | Toast | Singleton store — bisa dipanggil di luar React | | Table | Toolbar, pagination, responsive columns | | Navbar | Left/center/right slots, search, icon buttons, glass | | Sidebar | Push mode (desktop) + overlay mode (mobile) | | Scrollbar | Thin macOS-style scrollbar wrapper |

Contoh Penggunaan

Button

import { Button } from 'avt-rct-lib'

<Button variant="primary">Simpan</Button>
<Button variant="destructive" loading>Menghapus...</Button>
<Button variant="outline" leftIcon={<PlusIcon />}>Tambah</Button>

Sidebar (Desktop + Mobile)

import { Sidebar, SidebarHeader, SidebarBrand, SidebarContent,
         SidebarGroup, SidebarItem, SidebarFooter, SidebarUser,
         SidebarToggle } from 'avt-rct-lib'

// Desktop — push mode
const [collapsed, setCollapsed] = useState(false)
<Sidebar collapsed={collapsed} width="240px" collapsedWidth="64px">
  ...
</Sidebar>

// Mobile — overlay mode
const [open, setOpen] = useState(false)
<Sidebar overlay collapsed={!open} onOverlayClose={() => setOpen(false)} width="280px">
  ...
</Sidebar>

Menu Dropdown

import { MenuRoot, MenuButton, MenuContent, MenuItem, MenuSeparator } from 'avt-rct-lib'

// MenuContent menggunakan createPortal — selalu di atas semua elemen
<MenuRoot>
  <MenuButton className="...">Opsi</MenuButton>
  <MenuContent align="end">
    <MenuItem icon={<EditIcon />}>Edit</MenuItem>
    <MenuSeparator />
    <MenuItem icon={<TrashIcon />} variant="destructive">Hapus</MenuItem>
  </MenuContent>
</MenuRoot>

Toast

import { toast, dismissToast, Toaster } from 'avt-rct-lib'

// Di root layout
<Toaster position="bottom-right" />

// Panggil dari mana saja — bahkan dari luar React (API interceptor, dll)
toast({ title: 'Berhasil!', variant: 'success' })
toast({ title: 'Error', description: 'Detail...', variant: 'destructive' })

const id = toast({ title: 'Loading...', duration: Infinity })
dismissToast(id)

Table

import { Table, TableHeader, TableBody, TableRow, TableHead,
         TableCell, TableToolbar, TablePagination } from 'avt-rct-lib'

<Table>
  <TableToolbar>
    <Input leftAddon={<SearchIcon />} placeholder="Cari..." />
    <Button size="sm">Tambah</Button>
  </TableToolbar>
  <TableHeader>
    <TableRow>
      <TableHead>Nama</TableHead>
      <TableHead className="hidden sm:table-cell">Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {data.map(row => (
      <TableRow key={row.id}>
        <TableCell>{row.name}</TableCell>
        <TableCell className="hidden sm:table-cell">
          <Badge variant="success" dot>Aktif</Badge>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
  <TablePagination page={page} pageCount={total}
    canPrev={page > 1} canNext={page < total}
    onPrev={() => setPage(p => p - 1)}
    onNext={() => setPage(p => p + 1)} />
</Table>

Development (dari source lokal)

// vite.config.ts — alias ke source langsung
resolve: {
  alias: {
    'avt-rct-lib': path.resolve(__dirname, '../avt-rct-lib/src/index.ts'),
  },
}

// tailwind.config.js — scan source langsung
content: [
  '../avt-rct-lib/src/**/*.{ts,tsx}',
]

// main.tsx — import CSS dari source
import '../avt-rct-lib/src/styles/base.css'

Build & Publish

bun run build       # kompilasi ke dist/
npm version patch   # bump versi (1.0.0 → 1.0.1)
npm publish         # upload ke npm registry

License

MIT