Layout

View

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

Box Model

The View component is the fundamental building block. It provides shorthands for padding, margin, sizing, and styling.

Styled View

'use client'

import React from 'react'
import { View, Text } from 'biibaos'

export default function App() {
  return (
    <View 
      p={24} 
      bg="primary" 
      radius="xl" 
      shadow="lg"
      style={{ width: 200, height: 100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
    >
      <Text color="white" weight="bold">Styled View</Text>
    </View>
  )
}

Layout & Sizing

Control display, flex behavior, and precise dimensions.

'use client'

import React from 'react'
import { View } from 'biibaos'

export default function LayoutExample() {
  return (
    <View display="flex" gap={12} align="center">
      <View w={60} h={60} bg="primary" radius="full" />
      <View flex={1} h={40} bg="secondary" radius="md" />
    </View>
  )
}

Properties

Prop	Type	Default	Description
`as`	`keyof JSX.IntrinsicElements`	—	HTML tag type to render (button or a)
`children`	`React.ReactNode`	—	Main descriptive text or overlay children layout
`display`	`'flex' \| 'inline-flex' \| 'block' \| 'inline-block' \| 'grid' \| 'none'`	—	Configures the display option
`direction`	`'row' \| 'row-reverse' \| 'column' \| 'column-reverse'`	—	Configures the direction option
`align`	`'flex-start' \| 'center' \| 'flex-end' \| 'stretch' \| 'baseline'`	—	Horizontal text alignment (left, center, right, justify)
`justify`	`'flex-start' \| 'center' \| 'flex-end' \| 'space-between' \| 'space-around' \| 'space-evenly'`	—	Configures the justify option
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	—	Configures the wrap option
`gap`	`number \| string`	—	Configures the gap option
`p`	`number \| string`	—	Uniform padding shorthand in pixels or spacing keys
`px`	`number \| string`	—	Horizontal padding shorthand
`py`	`number \| string`	—	Vertical padding shorthand
`pt`	`number \| string`	—	Top padding shorthand
`pb`	`number \| string`	—	Bottom padding shorthand
`pl`	`number \| string`	—	Left padding shorthand
`pr`	`number \| string`	—	Right padding shorthand
`m`	`number \| string`	—	Uniform margin shorthand
`mx`	`number \| string`	—	Horizontal margin shorthand
`my`	`number \| string`	—	Vertical margin shorthand
`mt`	`number \| string`	—	Top margin shorthand
`mb`	`number \| string`	—	Bottom margin shorthand
`ml`	`number \| string`	—	Left margin shorthand
`mr`	`number \| string`	—	Right margin shorthand
`w`	`number \| string`	—	Width shorthand in pixels or percent
`h`	`number \| string`	—	Height shorthand
`minW`	`number \| string`	—	Minimum width constraint
`maxW`	`number \| string`	—	Maximum width constraint
`minH`	`number \| string`	—	Minimum height constraint
`maxH`	`number \| string`	—	Maximum height constraint
`bg`	`'primary' \| 'secondary' \| 'surface' \| 'surface-raised' \| 'bg' \| 'danger' \| 'success' \| 'warning' \| 'info' \| 'transparent' \| string`	—	Predefined theme color background token or custom hex code
`color`	`'primary' \| 'text' \| 'muted' \| 'subtle' \| 'danger' \| 'success' \| 'warning' \| 'info' \| string`	—	Predefined theme typography color token or hex code
`radius`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| number \| string`	—	Predefined corner rounding preset (none, sm, md, lg, xl, full)
`border`	`boolean \| string`	—	Draws a border boundary
`shadow`	`'sm' \| 'md' \| 'lg' \| 'none'`	—	Elevation shadow preset (none, sm, md, lg)
`position`	`'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'`	—	CSS layout positioning model
`overflow`	`'visible' \| 'hidden' \| 'scroll' \| 'auto'`	—	Content clipping overflow model
`flex`	`number \| string`	—	Flexbox growth parameter shorthand
`key`	`string]: any`	—	Configures the key option

Grid

Modal