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
- 27+ components — UI primitives, app blocks, 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 with visual variants, responsive sizes, loading feedback, and composable child rendering.InputUse a typed React text input with validation states, icon support, accessible focus styles, and Tailwind customization.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 users with a React avatar that supports images, fallback content, grouping, and consistent accessible sizing.CheckboxAdd an accessible React checkbox for binary selections with controlled state, labels, and keyboard interaction.SwitchUse an accessible React switch for on-off settings with controlled state, keyboard support, and clear visual feedback.SelectBuild a typed React select control for choosing one option with accessible interaction and customizable styling.TextareaAdd a multi-line React text input with character counting, resize options, validation states, and accessible labels.TabsOrganize related React content into accessible tab lists, triggers, and keyboard-navigable panels.ComboboxCreate a searchable React combobox with single or multiple selection, accessible controls, and typed options.
Blocks
AppShellStructure React applications with a responsive app shell that composes navigation, sidebars, headers, and main content.PageHeaderBuild consistent React page headers with titles, descriptions, breadcrumbs, and responsive action areas.EmptyStateExplain empty React views with contextual icons, helpful descriptions, search variants, and clear next actions.FormSectionGroup related React form fields with headings, descriptions, validation-ready layout, and aligned action controls.DataTablePresent structured React data with typed columns, pagination, responsive controls, and reusable table states.SidebarAdd a responsive React sidebar for application navigation with collapsible structure and accessible links.NavbarCreate a responsive React navigation bar with desktop links, mobile menu behavior, and flexible brand content.Stats CardDisplay key React dashboard metrics with trend indicators, supporting context, icons, and consistent card layout.
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.