Display

QR Code

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

Share this Page

A dynamic example showing how to share the current page URL.

Share this Page

Scan this code to open this documentation on your mobile device.

BiibaOS Documentation

Native-feel UI components for React

https://biiba.os

'use client'

import { QRCode, Stack, Text } from 'biibaos'
import { useState, useEffect } from 'react'

export default function SharePage() {
  const [url, setUrl] = useState('')
  
  useEffect(() => {
    if (typeof window !== 'undefined') {
      setUrl(window.location.href)
    }
  }, [])

  return (
    <Stack direction="column" gap={32} align="center">
      <Text variant="h3" weight="bold">Share this Page</Text>
      <QRCode 
        variant="card"
        value={url || 'https://biiba.os'}
        title="BiibaOS"
        description="Scan to open"
        showLink
        size={200}
      />
    </Stack>
  )
}

Visual Styles

Choose between flat, card, and outline variants.

'use client'

import React from 'react'
import { QRCode, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack direction="row" gap={32}>
      <QRCode value="biiba.ui" variant="flat" size={100} />
      <QRCode value="biiba.ui" variant="card" size={100} />
      <QRCode value="biiba.ui" variant="outline" size={100} />
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`value`	`string`	—	Raw data string or URL to encode into the QR grid
`size`	`number`	160	Predefined size scaling preset
`level`	`'L' \| 'M' \| 'Q' \| 'H'`	'M'	Configures the level option
`title`	`string`	—	Structural modal header title
`description`	`string`	—	Supporting description or helper guidance text
`showLink`	`boolean`	false	Configures the showLink option
`variant`	`'card' \| 'flat' \| 'outline'`	'flat'	Semantic design theme variant
`logo`	`string`	—	Logo image source to show in the center
`logoSize`	`number`	40	Size of the logo in pixels

Accordion

Icon