Introduction
Fasla provides a collection of reusable components that you can copy and paste into your apps. It's not a traditional component library — you own the code and can customize it however you want.
Features
- 42+ components — UI primitives and effects
- Accessible — built with accessibility in mind, keyboard navigation included
- Animated — smooth animations with Framer Motion, respects reduced motion
- TypeScript — 100% TypeScript with full type safety
- Dark mode — dark mode support out of the box
- Customizable — built with Tailwind CSS, easy to customize
Component categories
UI primitives
ButtonAdd an accessible React button in five types and three tones, four sizes and two radii, with a loading state and a link that is always underlined.Icon ButtonAdd an accessible square React icon button in four types and three tones, four sizes and two radii, with a warning when it has no accessible name.InputUse a typed React text input with validation states, icon support, accessible focus styles, and Tailwind customization.Input NumberAdd a React number field with step buttons in five layouts, min and max limits, keyboard stepping, Western digits and RTL.OTP InputAdd a React one-time code field with a slot per digit, SMS autofill, paste and four layouts, built on input-otp and mirrored for RTL.CardCompose React card layouts from accessible header, title, description, content, and footer building blocks.BadgeDisplay compact React status indicators and labels with reusable badge variants and semantic Tailwind styling.SkeletonCreate accessible React loading placeholders for text, avatars, cards, and custom content layouts with Fasla skeletons.AvatarRepresent people with a React avatar: photo, initials or icon fallback, three sizes, an optional border and a presence dot.Status IndicatorShow online, away, busy or offline presence with a React status dot whose accessible name follows the page language.CheckboxAdd an accessible React checkbox for binary selections with controlled state, labels, and keyboard interaction.RadioAdd an accessible React radio for choosing one option from a set, with a plain control, a bordered card layout, and full RTL support.SwitchUse an accessible React switch for on-off settings with controlled state, keyboard support, and clear visual feedback.SelectBuild a React select field for choosing one option or several, with badges, labels, keyboard support and RTL.CalendarAdd an accessible React calendar for choosing a day or a range across up to three months, with month and year menus and a mirrored RTL layout.Date PickerBuild a React date field that opens a calendar for one day or a range, with labels, helper text, four sizes, keyboard support and RTL.Dropdown MenuAdd accessible React dropdown menus with icons, shortcuts, checkbox and radio items, switches and submenus, mirrored for RTL.TextareaAdd a multi-line React text field that grows with its text, with a label, helper text, a character counter, and validation states.TabsOrganize related React content into accessible tab lists, triggers, and keyboard-navigable panels.TooltipAdd accessible React tooltips in six styles, with an arrow, description, icon or avatar, placed on any side and mirrored for RTL.AlertShow accessible React alerts for news, guidance, success, warnings and errors: three types, an action and a close button, mirrored for RTL.PaginationPage through long lists with accessible React pagination built on Button: three variants, four sizes, an ellipsis, mirrored for RTL.ProgressShow task completion with an accessible React progress bar in three sizes, with an optional percentage label, mirrored for RTL.StepsShow progress through a multi-step flow with an accessible React stepper: done, current and upcoming steps, in a row or a column, mirrored for RTL.AccordionAdd accessible React accordions in four styles, with a chevron or plus indicator, one or several items open, and mirrored for RTL.Alert DialogAsk users to confirm or cancel an action in an accessible React alert dialog, with a destructive style, an icon, extra content and RTL.DialogCollect input without leaving the page in an accessible React dialog: three widths, a back and close button, scrolling content and RTL.BreadcrumbShow where a page sits with an accessible React breadcrumb: chevron or slash separators, optional icons, a collapsed trail, mirrored for RTL.SheetSlide a panel in from any edge with an accessible React sheet: top, bottom, or start and end that follow the reading direction, mirrored for RTL.SliderPick a value or a range by dragging a thumb with an accessible React slider in three sizes, with keyboard support, mirrored for RTL.SidebarAdd a React app sidebar that collapses to icons, with grouped links, sub-items, tooltips and right-to-left support.ComboboxCreate a searchable React combobox with single or multiple selection, accessible controls, and typed options.CarouselBuild an accessible React carousel on CSS scroll snapping, with a dot stepper, controlled state, and RTL support with no extra code.Content CarouselShow cards in a React content carousel with previous and next arrows, one to three slots per view, and accessible keyboard control.
Effects
Shimmer ButtonDraw attention to React calls to action with a polished shimmer animation that respects reduced-motion preferences.AnimatedGradientAdd a configurable animated gradient background to React hero sections and cards with smooth motion behavior.TextRevealReveal React text character by character with reusable animation controls and reduced-motion support.BorderBeamHighlight React cards and containers with a configurable animated beam that travels around the border.SpotlightCreate cursor-responsive spotlight backgrounds for React interfaces with controlled glow and positioning.Typewriter TextAnimate React copy with a configurable typewriter sequence for product messages, headings, and demonstrations.Glow CardBuild interactive React cards with pointer-following glow effects, layered content, and adaptable surface styling.