Feedback

Skeleton

Shimmer placeholder for content loading states.

Content Placeholder

Skeletons provide visual feedback while content is being fetched. They should roughly match the shape of the content they replace.

'use client'

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

export default function SkeletonBasics() {
  return (
    <View style={{ width: '100%', maxWidth: 400 }}>
      <Skeleton height={24} width="60%" style={{ marginBottom: 12 }} />
      <Skeleton lines={3} lineGap={10} />
    </View>
  )
}

Common Patterns

Combine different skeleton shapes to build complex interface placeholders.

'use client'

import React from 'react'
import { Skeleton, Stack, View, Divider } from 'biibaos'

export default function CardSkeleton() {
  return (
    <View p={20} bg="surface-raised" radius="lg" border style={{ width: '100%', maxWidth: 400 }}>
      <Stack direction="row" gap={16} align="center">
        <Skeleton circle width={48} height={48} />
        <div style={{ flex: 1 }}>
          <Skeleton height={14} width="40%" style={{ marginBottom: 8 }} />
          <Skeleton height={10} width="80%" />
        </div>
      </Stack>
      <Divider style={{ margin: '20px 0' }} />
      <Skeleton height={120} radius="md" />
    </View>
  )
}

Properties

Prop	Type	Default	Description
`width`	`string \| number`	—	Horizontal width in pixels or CSS units
`height`	`string \| number`	—	Vertical dimension of the chart area in pixels
`circle`	`boolean`	—	Fully rounds to circle
`radius`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`	—	Border radius shorthand
`animate`	`boolean`	—	Disable shimmer animation
`lines`	`number`	—	Number of repeated rows — useful for paragraph skeletons
`lineGap`	`number \| string`	—	Gap between repeated lines

Spinner

Toast