THE SYNE UI LIBRARY
Good interfaces.
Start here.
Explore 40 components, try real examples, and bring a consistent design language to your next web or desktop project.
GET UP AND RUNNING
Your first component
Build the library, copy dist/syne-ui into src/vendor/syne-ui, then configure the Tailwind 3 preset. Your app supplies React.
Setup and theming guide →import { Button } from "./vendor/syne-ui/index.js";
export function App() {
return <Button>Let’s build something</Button>;
}FIND YOUR BUILDING BLOCKS
Browse the collection
Core
03Komponen dasar yang paling sering dipakai di interface internal.
Data Display
04Komponen untuk menyajikan data dan konten secara terstruktur.
Accordion
Kontainer expandable untuk menampilkan konten bertingkat.
Web ready Desktop previewAvatar
Representasi visual user atau entity.
Web ready Desktop previewCarousel
Slider konten horizontal untuk item collection.
Web ready Desktop previewTable
Tampilan data tabular dengan rows dan columns.
Web ready Desktop previewFeedback
05Komponen untuk status, umpan balik, dan indikator proses.
Alert
Pesan status penting yang butuh perhatian user.
Web ready Desktop previewBadge
Label kecil untuk status atau kategorisasi item.
Web ready Desktop previewSkeleton
Placeholder loading sebelum konten asli tersedia.
Web ready Desktop previewSpinner
Indikator loading berbentuk animasi putar.
Web ready Desktop previewToast
Notifikasi ringan sementara di sudut layar.
Web ready Desktop previewForms
08Komponen input form untuk koleksi data pengguna.
Checkbox
Input boolean untuk pilihan jamak.
Web ready Desktop previewDatepicker
Input pemilihan tanggal dengan calendar picker.
Web ready Desktop previewFileupload
Input upload berkas tunggal atau multiple.
Web ready Desktop previewForm
Wrapper form untuk grouping field dan submit flow.
Web ready Desktop previewRadio
Input pilihan tunggal dalam satu group opsi.
Web ready Desktop previewSelect
Dropdown selection untuk opsi yang terstruktur.
Web ready Desktop previewSwitch
Toggle kontrol on/off dengan affordance visual.
Web ready Desktop previewTextarea
Input multi-line untuk teks panjang.
Web ready Desktop previewLayout
05Komponen pembentuk struktur halaman dan grid system.
Container
Wrapper lebar konten dengan alignment konsisten.
Web ready Desktop previewDivider
Garis pemisah antar section konten.
Web ready Desktop previewGrid
Sistem layout berbasis baris dan kolom responsif.
Web ready Desktop previewStack
Layout vertikal/horizontal dengan spacing terkontrol.
Web ready Desktop previewTabs
Navigasi konten bertab dalam satu area panel.
Web ready Desktop previewNavigation
02Komponen untuk navigasi dan orientasi pengguna dalam aplikasi.
Overlay
03Komponen untuk interaksi yang muncul di atas konten utama.
Enterprise
10Komponen tingkat enterprise untuk aplikasi berskala besar.
DataTable
Tabel dengan varian visual, renderer sel, dan callback klik baris. Sorting, filtering, dan pagination tersedia di DataGrid.
Web ready Desktop unavailableChart
Visualisasi data dalam bentuk bar, line, pie, atau donut.
Web ready Desktop unavailableCalendar
Kalender month/week dengan navigasi keyboard, batas tanggal, dan pemilihan rentang.
Web ready Desktop unavailableKanban
Board dengan kolom dinamis, drag-and-drop, pemindahan via keyboard/mobile, dan batas kartu per kolom.
Web ready Desktop unavailableFileManager
Daftar file dan folder yang bisa diperluas.
Web ready Desktop unavailableDataGrid
Tabel dengan pencarian, sorting, pagination, dan seleksi baris.
Web ready Desktop partialCommandPalette
Dialog pencarian perintah dengan navigasi keyboard.
Web ready Desktop partialRichTextEditor
Editor HTML dengan toolbar format dasar.
Web ready Desktop partialTimeline
Urutan peristiwa dengan status dan timestamp.
Web ready Desktop partialTreeView
Pohon data dengan expand/collapse dan seleksi node.
Web ready Desktop partialWeb components use React and Tailwind. Desktop adapters use NodeGui with a separate API; check each component’s status before integrating.