Components

Browse through our collection of 49 premium UI components organized across 9 categories. Every element is designed to adapt to its environment.

Actions

2

Button

Trigger actions with haptic feedback, ripple effects, loading states, and icon support.

Button Group

Unified action groups with shared borders and consistent sizing.

Forms

11

Input

Text input with label, hint, icon slots, sizes, error / success states.

Textarea

Resizable multi-line text area sharing the same API as Input.

Select

Native select with custom chevron arrow and consistent BiibaOS styling.

Checkbox

Animated checkbox with indeterminate state support.

Radio

Radio button with smooth selection animation.

Toggle

iOS-style on/off switch in two sizes.

Slider

Range slider with custom thumb and track styling.

Upload

Premium file upload area with drag and drop support and animated feedback.

OTP Input

Keyboard-optimized verification code input with auto-focus and paste support.

Rich Text

Minimal rich text editor with configurable actions, emoji support, and character limits.

Calendar

Full-featured date selection and calendar view with native mobile sheets.

Typography

1

Text

Polymorphic text component — display, headings, body, caption, mono.

Display

7

Badge

Status chip with dot variant and semantic colour tokens.

Accordion

Smoothly expanding sections for organizing large amounts of content.

QR Code

Premium QR code display for sharing links, apps, or authentication data.

Icon

Adaptive SVG icons powered by Lucide with native-feeling interaction physics.

Avatar

Image or initials avatar in circle, square, and rounded shapes.

Empty

Placeholder state for empty lists, search results, or missing data.

Timeline

Stagger-animated spatial line indicating item chronologies and status updates.

Layout

6

Card

Surface container with optional header, body, footer, and interactive hover.

Divider

Horizontal or vertical separator with optional label.

Sidebar

Vertical navigation container with section support.

Stack

Flexbox container for vertical or horizontal alignment.

Grid

CSS Grid container for structured layouts.

View

A highly customizable primitive container replacing standard divs with built-in styling props.

Feedback

7

Spinner

Loading spinner in all sizes with semantic colour variants.

Skeleton

Shimmer placeholder for content loading states.

Toast

Draggable toast notifications with progress bar and swipe-to-dismiss on mobile.

Snackbar

Action-focused snackbar that springs up from the bottom.

Alert

Static contextual feedback messages with icons and actions.

Progress

Visual status indicator for tasks and processes.

Status Page

Beautifully sequenced full-screen animated status and error page.

Navigation

5

Navbar

Sticky frosted-glass navigation bar with mobile hamburger menu.

Breadcrumb

Navigation helper for deeply nested content hierarchies.

Tabs

Tabbed navigation with smooth animated transitions.

Bottom Bar

Mobile-first bottom tab bar with spring transitions between tabs.

Pagination

Physical spring-sliding page navigation adaptive for both desktop and mobile views.

Overlays

7

Modal

Adaptive overlay that renders as a bottom sheet on mobile and a centered dialog on desktop.

Popover

Adaptive floating panel that opens relative to a trigger — dropdown on desktop, sheet on mobile.

Spotlight

Adaptive command palette for quick navigation and actions, optimized for both keyboard and touch.

Dropdown

Floating selection menus that adapt to bottom sheets on mobile.

Context Menu

Long-press on mobile, right-click on desktop — same component, platform-adaptive.

Action Sheet

iOS-style sheet of actions — destructive actions styled automatically.

Tooltip

Popup helper text triggered on hover/focus (desktop) or touch/haptics (mobile).

Content

3

Table

Tabular data container with consistent row and column styling.

Charts

Beautiful, responsive data visualizations including Line, Area, Bar, and Pie charts.

Carousel

Touch-swipeable content slider with auto-play and indicator dots.