DivideriOS

Hairline rule with optional centered label, horizontal or vertical.

$ npx lumioui add divider

import { Divider } from "@/components/ui/divider/divider";

Props4

label?	string	Text rendered in the middle of the line.
orientation?	"horizontal" \| "vertical"	Line direction. Default "horizontal".
className?	string
labelClassName?	string	Extra classes for the label text.

Divider — Labeledlabeled.tsx

divider/variants/labeled.tsx open

Hairline rule with optional centered label, horizontal or vertical.

import { DividerLabeled } from "@/components/ui/divider/variants/labeled";

export function Example() {
  return (
    <DividerLabeled />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Divider } from "../divider";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** DividerLabeled — labeled rule staged inside a fuller checkout summary. */
export function DividerLabeled() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center gap-2">
            <Icon name="shopping-cart" size="sm" color="mutedForeground" />
            <Text variant="small" className="font-semibold">Order summary</Text>
          </View>

          <View className="gap-1">
            <View className="flex-row justify-between">
              <Text variant="small">Tonkotsu ×2 · Gyoza · Matcha</Text>
              <Text variant="small" className="tabular-nums">$39.50</Text>
            </View>
            <View className="flex-row justify-between">
              <Text variant="muted">Delivery · Sakura Ramen</Text>
              <Text variant="muted" className="tabular-nums">$3.90</Text>
            </View>
          </View>

          <Divider label="Total · $43.40" />

          <View className="flex-row items-center gap-2">
            <Icon name="credit-card" size="sm" color="mutedForeground" />
            <Text variant="muted">VISA •• 4902 — tap to change payment method</Text>
          </View>

          <Glass interactive curvature="edge" className="flex-row items-center justify-between rounded-xl px-3 py-2.5">
            <Text variant="muted">Arrives Thursday · 14 Rua das Flores</Text>
            <Icon name="map-pin" size="sm" color="mutedForeground" />
          </Glass>
        </Glass>
      </View>
  );
}

Divider — Verticalvertical.tsx

divider/variants/vertical.tsx open

Hairline rule with optional centered label, horizontal or vertical.

import { DividerVertical } from "@/components/ui/divider/variants/vertical";

export function Example() {
  return (
    <DividerVertical />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Divider } from "../divider";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** DividerVertical — vertical rules between inline route stops. */
export function DividerVertical() {
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="text-white drop-shadow">Lisbon → Faro — route</Text>
        <Glass interactive curvature="edge" className="w-full flex-row items-center gap-3 rounded-2xl p-4">
          <Text>Lisbon</Text>
          <Divider orientation="vertical" className="h-4" />
          <Text>Porto</Text>
          <Divider orientation="vertical" className="h-4" />
          <Text>Faro</Text>
        </Glass>
      </View>
  );
}