ContentAdded in Sierra

Gesture List

Swipeable list rows that support reveal-and-hold actions or instant commit via velocity throw.

Swipe Actions & Throw Commit

Swipe left to reveal actions. A fast throw gesture commits the primary (first) action immediately, while a slow drag holds the actions open.

Welcome to Sierra

Read the upgrade notes in the repository.

Design feedback requested

Verify the glassmorphism tilt parallax on devices.

Upcoming release calendar

Schedule release roadmap discussions.

'use client'

import React, { useState } from 'react'
import { GestureList, Text, useToast } from 'biibaos'
import { Trash2, Archive } from 'lucide-react'

export default function App() {
  const { toast } = useToast()
  const [items, setItems] = useState([
    { id: '1', title: 'Hello Sierra', body: 'This row can be swiped left.' }
  ])

  const listItems = items.map(item => ({
    id: item.id,
    content: (
      <div style={{ padding: 16, background: 'var(--biiba-surface)' }}>
        <Text weight="semibold">{item.title}</Text>
        <Text size="sm" color="muted">{item.body}</Text>
      </div>
    ),
    actions: [
      {
        id: 'archive',
        label: <Archive size={16} />,
        color: '#3b82f6',
        onSelect: () => toast.success('Archived')
      },
      {
        id: 'delete',
        label: <Trash2 size={16} />,
        color: '#ef4444',
        onSelect: () => toast.success('Deleted')
      }
    ]
  }))

  return (
    <GestureList
      items={listItems}
      onCommit={(itemId, actionId) => {
        toast.info('Committed action via quick velocity flick!')
      }}
    />
  )
}

Properties

Prop	Type	Default	Description
`items`	`GestureListItem[]`	—	List of row items, each containing an id, renderable content, and revealed actions.
`onCommit`	`(itemId: string, actionId: string) => void`	—	Fires when a velocity throw swipe commits the first action immediately.

Dynamic Island

Morph Card