Components
Pre-built, accessible components that embody Ferni's design philosophy. Every component is designed to make AI feel more human.
All Components
13 components available
Avatar
Expressive persona avatars with emotion states and animations
Badge
Status indicators, labels, and notification badges
Buttons
Primary, secondary, and ghost button variants
Cards
Content containers with elevation and persona accents
Dropdown
Menu dropdowns and selection lists
Glass Surfaces
Frosted glass effects for overlays and modals
Inputs
Text fields, selects, and form controls
Modal
Dialog windows for focused interactions
Progress
Progress bars, spinners, and loading states
Tabs
Tabbed navigation for content sections
Toast
Non-intrusive feedback notifications
Tooltip
Contextual hints and information popups
Design Principles
Accessible by Default
WCAG 2.1 AA compliant. Keyboard navigable. Screen reader friendly.
Token-Based
All styling uses design tokens. Theme changes propagate automatically.
Motion-Aware
Respects reduced motion preferences. Animations enhance, never distract.
Persona-Ready
Components support persona theming through CSS custom properties.
Usage Guidelines
Consistency
Use components as designed. Avoid overriding styles unless absolutely necessary.
Composition
Build complex interfaces by composing simple components together.
Responsiveness
All components are built mobile-first and adapt to different screen sizes.
Performance
Components are optimized for render performance and minimal bundle size.