📄️ Input
The Input component is a flexible, styled text input field with support for floating labels, prefixes, suffixes, info messages, and error states.
📄️ Button
👉 View in Storybook
📄️ Date Picker
The DatePicker component is a styled date selection input with floating label, error states, form integration (React Hook Form), and options to disable past dates.
📄️ Checkbox Button
The CheckboxButton component is a flexible, styled checkbox UI that supports both single and multiple selection modes.
📄️ Radio Button
The RadioButton component allows users to select one option from a list of choices.
📄️ Select
The Select component provides a customizable dropdown menu for choosing one option from a list.
📄️ Textarea
The Textarea component is a flexible and styled multi-line input field that supports labels, error messages, controlled/uncontrolled values, and integration with form libraries like React Hook Form.
📄️ File Upload
The FileUpload component allows users to upload multiple files, file preview, validation (max size & max files), and integration with form libraries like React Hook Form.
📄️ Image Picker
The ImagePicker component allows users to upload multiple images with preview, validation (max size & max files), and integration with form libraries like React Hook Form.
📄️ Typography
The Typography component provides a consistent way to render text elements (p, h1–h6, span, etc.) with predefined variants for size, weight, and color.
📄️ Tabs
The Tabs component provides a flexible tab switcher with optional icons, variants, and RTL/LTR support.
📄️ Badge
👉 View in Storybook
📄️ Alert Dialog
The AlertDialog component is a modal dialog used to display critical information or confirm an action.
📄️ Loader
👉 View in Storybook
📄️ Alert
👉 View in Storybook
📄️ Circle Progress
The CircleProgress component displays a circular progress indicator with customizable size and percentage, built using SVG and Tailwind CSS.
📄️ Progress Bar
The ProgressBar component renders a customizable horizontal progress slider with optional interactivity. It leverages the Slider base component for track and thumb rendering.
📄️ OTP
The OTP component provides a One-Time Password input with a countdown timer, resend functionality, and customizable UI.
📄️ Pagination
The Pagination component provides page navigation controls with support for first/last/next/previous buttons, dynamic page numbers, and a page size selector.
📄️ Stepper
The Stepper component displays a progress stepper with multiple steps, each having a title, description, and status.
📄️ Switch
The Switch component is a customizable toggle input with support for labels, error messages, size variants, and form integration.
📄️ Vertical Stepper
The VerticalStepper component displays a sequence of stages vertically, representing a process with completed, active, and pending states. It automatically updates item statuses based on completion logic.
📄️ Date Selector
The DateSelector component provides a flexible date selection input with support for Gregorian and Hijri calendars.
📄️ Divider
The Divider component is used to visually separate content in layouts.
📄️ Carousel
The Carousel component provides a flexible, smooth, and accessible slideshow built using Embla Carousel.
📄️ Skeleton
The Skeleton Use to show a placeholder while content is loading.
📄️ ExpandableSection
The ExpandableSection component is a flexible, responsive collapsible section with support for custom icons, additional content, controlled and uncontrolled open state, and fully customizable styling.
📄️ Accordion
The Accordion component is a flexible, responsive container for multiple ExpandableSection components, supporting single or multiple open sections, custom toggle icons, default open state, and fully customizable styling.
📄️ Icon Text
The IconText component displays an icon alongside text and supports customizable alignment, spacing, icon size, text size, and individual styling.