Fikra Design System
A modern component library built for AI-powered applications. Elegant frosted glass aesthetics that work beautifully in light and dark modes.
Glass Effects
Frosted glass with backdrop blur
Light & Dark
Seamless theme switching
19 Components
Production-ready UI kit
Interactive
Smooth animations & transitions
Frosted Glass Effects
Our signature glassmorphism aesthetic with backdrop blur and transparency.
Light Glass
Subtle transparency
.glassSolid Glass
More opaque
.glass-solidGlass Card
With hover glow
.glass-cardColor Palette
Carefully crafted colors that adapt to light and dark modes.
Primary
Accent
Background
Foreground
Muted
Success
Warning
Destructive
Brand Gradient
Component Library
19 production-ready components
Button
Interactive buttons with multiple variants and sizes for different contexts.
Variants
Sizes
With Icons
Card
Container component with glass morphism effect for grouping related content.
Default Card
Standard solid background
Perfect for content that needs clear separation.
Glass Card
Frosted glass effect
Beautiful transparency with backdrop blur.
Gradient Card
Vibrant gradient border
Eye-catching for featured content.
Input & Textarea
Form input components with glass styling and validation states.
Badge
Small status indicators and labels for categorization.
Avatar
User profile images with fallback support.
Switch & Checkbox
Toggle controls for binary choices and multi-select options.
Switch
Checkbox
Select
Dropdown selection component for choosing from a list of options.
Tabs
Tabbed interface for organizing content into sections.
Overview content goes here. This tab shows the main dashboard view.
Accordion
Expandable content sections for FAQs and collapsible information.
Alert
Contextual feedback messages for user notifications.
Information
Success
Warning
Error
Glass Alert
Progress
Visual progress indicators for loading states and completion tracking.
Skeleton
Placeholder loading states for content that is being fetched.
Tooltip
Contextual information displayed on hover.
Dialog
Modal dialogs for focused interactions and confirmations.
Dropdown Menu
Context menus and action dropdowns for navigation.
Separator
Visual dividers for separating content sections.
Content above separator
Content below separator
Built for Modern Applications
React, TypeScript, Tailwind CSS, Framer Motion, and Radix UI primitives. Fully accessible and customizable.