UI

Farzad UI

Unified Component Library

A consistent design system for all Farzad platforms. 45 component categories with dark/light mode support, built on CSS variables and Tailwind CSS.

Components

45

CSS Variables

20+

Theme Modes

2

Font

Inter

Color Palette

Accent

--accent

Success

--success

Warning

--warning

Danger

--danger

Info

--info

Surface

--surface

Background

--background

Border

--border

Text Primary

--text-primary

Text Secondary

--text-secondary

Text Muted

--text-muted

Accent Text

--accent-text

Foundation

Dashboards

Stat cards, charts, activity feeds, todo, chat widgets

Typography

Font scale, weights, colors, and text utilities

Grid

12-column responsive grid, offsets, nesting, alignment

Apps

Email

Inbox, compose, detail view, categories, tags

Calendar

Month view, week view, events, mini calendar

Ecommerce

Products, cart, checkout, orders, wishlist

Profile

Cover photo, tabs, activity feed, settings, connections

Gallery

Image grid, masonry, lightbox, filters, file manager

Components

Buttons

Solid, outline, rounded, icon, circle, groups, dropdowns

Cards

Image, header/footer, colored, bordered, groups, actions

Alerts

Success, warning, error, info, dismissible

Badges

Status labels, pills, dots, tags, counts

Progress

Bars, sizes, striped, animated, stacked

Spinners

Border, dots, pulse, inline, overlay

Avatars

Initials, sizes, status, stacked groups

Breadcrumbs

Navigation trails, separators, collapsed

Tooltips

Hover tips, popovers, positions, rich content

Dropdowns

Menus, user menu, notifications, split

Pagination

Page navigation, sizes, rounded, icons, summary

Carousel

Slideshow, controls, indicators, captions, auto-play

Collapse

Collapsible panels, accordion, nested, colored

Data Display

Tables

Striped, hover, bordered, contextual, actions, checkboxes

Data Tables

Sortable, colored, expandable, inline edit, pagination

Tabs

Underline, pills, boxed, vertical

List & Media

List groups, media objects, badges, nested, feeds

Charts

Bar, line, pie, donut, area, sparkline, gauge charts

Feedback

Modals

Sizes, confirmation, form, scrollable, centered, grid

Toasts

Live notifications, bordered, dismissible

Notifications

Color alerts, icons, dismissible, timeline

Forms

Form Inputs

Text, select, checkbox, radio, switch, validation, groups

Advanced Forms

Horizontal, touchspin, date picker, color picker, dropzone

Image Cropper

Crop, resize, rotate, zoom, filters, aspect ratios

Pages

Auth Pages

Login, register, forgot password, OTP, lock screen

Error Pages

400, 403, 404, 500, 503, offline, coming soon

Search Results

Web, image, people, product results, filters

Icons

Feather, weather, fontawesome icons, sizes, colors

Maps

Map placeholders, markers, info cards, controls

Sample Pages

Animation

CSS animations: bounce, fade, flip, slide, zoom, rotate

Treeview

Hierarchical tree, checkboxes, file explorer, search

Block UI

Loading overlays, skeleton loaders, blocking patterns

Session Timeout

Timeout warnings, idle detection, auto-logout

Helper Classes

Spacing, text, display, flex, border, shadow utilities

Maintenance

Maintenance page, starter kit, system status

Bootstrap UI

Accordion, offcanvas, placeholders, navbar, collapse

Scrollspy

Scroll-activated navigation, progress tracking