biibaos
v26.0.2
Published
Web and mobile. One component. Native everywhere.
Maintainers
funtechs.ioReadme
biibaos
Web and mobile. One component. Native everywhere.
biibaos is a React and Next.js UI library built on one idea: your web app should feel like it belongs on the device it's running on. Not just look good — feel right.
Every component detects its platform and behaves accordingly. Springs, not timings. Haptics, not clicks. Surfaces with depth, not flat boxes.
Tahoe
The 2025 release. Named after the lake. Defined by one thing: depth.
Glass surfaces. Physics-based spring motion. A vibrancy layer that blurs what's behind it. Sheets that swipe to dismiss. Sidebars that open with an edge gesture — no wrappers, no config. It's all there by default.
Get started
npm install biibaos// app/layout.tsx
import 'biibaos/styles'
import { BiibaProvider } from 'biibaos'
export default function RootLayout({ children }) {
return (
<html>
<body>
<BiibaProvider>
{children}
</BiibaProvider>
</body>
</html>
)
}That's it.
Theme
biibaos works out of the box. When you're ready to make it yours:
<BiibaProvider
theme={{
colors: {
light: { primary: '#6366f1' },
},
animation: { preset: 'expressive' },
radius: { md: '10px' },
}}
followSystemTheme
>The basics
import { Button, Input, Text, Card, CardBody } from 'biibaos'
<Text variant="h1">Hello</Text>
<Text variant="body" color="muted">Supporting text</Text>
<Input label="Email" type="email" />
<Button variant="primary" loading>Saving…</Button>
<Card>
<CardBody>Content</CardBody>
</Card>Platform-aware by default
Every component knows where it's running.
import { Select, Modal, Sidebar } from 'biibaos'
// Select → dropdown on desktop, bottom sheet on mobile
// Modal → centered dialog on desktop, slides up on mobile
// Sidebar → fixed panel on desktop, edge-swipe drawer on mobileNo conditions. No isMobile checks. It just works.
New in Tahoe
import { BottomSheet, ActionSheet, ContextMenu, NavigationBar, StatusPage } from 'biibaos'
// Snap-point bottom sheet — swipe between heights
<BottomSheet isOpen={open} onClose={close} snapPoints={['half', 'full']} title="Details">
{children}
</BottomSheet>
// iOS-style action sheet — destructive actions styled automatically
<ActionSheet
isOpen={open}
onClose={close}
title="Delete photo?"
actions={[
{ id: 'delete', label: 'Delete', role: 'destructive', onClick: handleDelete },
{ id: 'cancel', label: 'Cancel', role: 'cancel', onClick: close },
]}
/>
// Animated status pages — 404, 401, 403, 500, offline, success
<StatusPage
status="404"
action={{ label: 'Go home', href: '/' }}
/>Motion
Four presets. One prop.
<BiibaProvider theme={{ animation: { preset: 'expressive' } }}>| Preset | Feel |
|---|---|
| none | No motion |
| subtle | Barely there |
| moderate | Balanced — default |
| expressive | Full spring, slight overshoot |
All motion uses spring physics. No ease-in-out. No hardcoded milliseconds.
Haptics
On mobile, every tap has a response. It's on by default.
// Turn off per component
<Button hapticFeedback={false}>No haptic</Button>
// Turn off globally
<BiibaProvider theme={{ animation: { haptics: false } }}>Dark mode
const { isDark, toggleDark } = useBiiba()Follows the system by default. Override any time.
What's inside
Inputs · Select · Textarea · Button · Badge · Avatar · Card · Modal · Toast · Snackbar · Tabs · Accordion · Sidebar · Navbar · Table · DataTable · Calendar · DatePicker · Carousel · Progress · Slider · Checkbox · Radio · Toggle · Upload · OTPInput · QRCode · ColorPicker · Spotlight · Breadcrumb · Divider · Skeleton · Spinner · Charts · RichText · Stack · Grid · View · Text · Icon · Empty
And new in Tahoe: BottomSheet · ActionSheet · ContextMenu · NavigationBar · StatusPage
Version
2025.1.0 — Tahoe
MIT License