Live Demo ferzui

Coba semua komponen ferzui secara interaktif. Klik, ubah, dan lihat bagaimana komponen bekerja secara real-time.

Buttons

Berbagai variasi button dengan states dan sizes yang berbeda.

Button Variants

Button Sizes

Interactive Demo

Cards

Card components untuk menampilkan konten dengan berbagai layout.

Basic Card

Ini adalah card dasar dengan header dan body. Perfect untuk menampilkan informasi penting.

Card Without Header

Card ini tidak memiliki header, hanya body content. Cocok untuk konten yang sederhana.

Last updated 3 mins ago

Card with Image

Image Placeholder

Card dengan placeholder image. Ideal untuk blog posts atau product cards.

Forms

Form components dengan validation dan berbagai input types.

Form Controls

Interactive Form

Alerts

Alert components untuk memberikan feedback kepada user.

Alert Types

Primary! This is a primary alert with an example link.
Success! Your action was completed successfully.
Warning! Please check your input before proceeding.
Danger! Something went wrong. Please try again.
Info! Here's some useful information for you.

Interactive Alerts

Navigation

Navigation components untuk menu dan breadcrumb.

Breadcrumb

Pagination

Progress

Progress bars untuk menunjukkan progress atau loading state.

Progress Bars

25%
50%
75%
100%

Interactive Progress

0%

Click "Start Progress" to see the animation

Badges

Badge components untuk status indicators dan labels.

Badge Variants

Primary Secondary Success Warning Danger Info Light Dark

Badge Sizes

Small Default Large

Tabs Underline & Dropdown

Tabs (Underline)

Ringkasan produk dan highlight fitur.

Dropdown (Navbar style)

Steps & Chips

Steps

1 Account
2 Profile
3 Confirm

Chips

Primary Success Warning Danger

Avatars & Skeleton

Avatars

FD

Skeleton

Spinners & Toast Queue

Spinners

Toast Queue

Ratio, Stacks, CSS Grid

Ratio

Stacks

Item A
Item B
Item C

CSS Grid

1
2 (span 2)
3
4 (span 4)

Masonry, Split View, A11y

Masonry

A
B
B
C
C
C
D
E
E

Split View (Resizable)

Left
Right

Skip Link & Reduced Motion

Animated (disabled if reduced motion)

Tabs & Accordion

Navigasi konten menggunakan tabs dan accordion.

Tabs

Ini adalah ringkasan produk.
Detail spesifikasi lengkap di sini.
Ulasan pengguna akan muncul di sini.

Accordion

ferzui adalah framework UI modern dengan 120+ komponen.
Gunakan CDN atau NPM sesuai kebutuhan.

Dropdowns & Tooltips

Interaksi dasar untuk membantu navigasi dan informasi.

Dropdown

Tooltip

Modals & Offcanvas

Komponen overlay untuk dialog dan panel samping.

Modal

Offcanvas

Toasts & Notifications

Pesan notifikasi ringan untuk feedback cepat.

Tables & Advanced Grid

Tabel sederhana dan layout grid responsif.

Table

Name Role Status
Alice Designer Active
Bob Developer Pending
Carol PM Blocked

Advanced Grid

1
2
3
4
5
6

New Components (Batch 1)

Segmented Control

Toggle Switch

Rating

★ ★ ★ ★ ★

Stepper (Horizontal)

1 Shipping
2 Payment
3 Review

Drawer

Drawer Panel
Content inside drawer.

Sortable Table

Name Role
AliceDesigner
BobDeveloper
CarolPM

Utilities

Contoh utilities spacing, colors, shadows, dan typography.

Spacing & Shadows

shadow-sm .mb-3
shadow-md .mb-3
shadow-lg

Colors

primary secondary success warning danger info

Want to see more components?

Explore all 120+ components in our comprehensive documentation.

View Full Documentation All Components Interactive Playground