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 React, { useState, useEffect } from 'react'
import { Stack, Text, QRCode } from 'biibaos'

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

  return (
    <Stack direction="column" gap={32} align="center" fullWidth>
      <Stack direction="column" gap={8} align="center">
        <Text variant="h3" weight="bold">Share this Page</Text>
        <Text color="muted" align="center" size="sm">
          Scan this code to open this documentation on your mobile device.
        </Text>
      </Stack>
      <QRCode
        variant="card"
        value={url || 'https://biiba.os'}
        title="BiibaOS Documentation"
        description="Native-feel UI components for React"
        showLink
        size={200}
      />
    </Stack>
  )
}

Visual Styles

Choose between flat, card, and outline variants.

'use client'

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

export default function App() {
  return (
    <Stack direction="row" gap={32} wrap align="center" justify="center" fullWidth>
          <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