SeparatorAndroid

Hairline rule with orientation and spacing control.

$ npx lumioui add separator

import { Separator } from "@/components/ui/separator/separator";

Props3

orientation?	"horizontal" \| "vertical"
decorative?	boolean	Hide the rule from assistive tech (default true). Set `decorative={false}` to expose it as a semantic separator — e.g. when it carries meaning between landmark sections rather than pure decoration.
className?	string

Separator — Receiptreceipt.tsx

separator/variants/receipt.tsx open

Hairline rule with orientation and spacing control.

import { SeparatorReceipt } from "@/components/ui/separator/variants/receipt";

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

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

/** SeparatorReceipt — horizontal rules inside a full receipt card. */
export function SeparatorReceipt() {
  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">
            <Glass interactive curvature="edge" className="h-8 w-8 items-center justify-center rounded-full">
              <Icon name="tram-front" size="sm" color="mutedForeground" />
            </Glass>
            <View className="flex-1">
              <Text variant="small" className="font-semibold">Alfa Pendular 184 · Coach 3</Text>
              <Text variant="muted" className="text-xs">Fri, Sep 18 · seats 12A/12B</Text>
            </View>
          </View>

          <Separator />
          <View className="flex-row justify-between py-0.5">
            <Text variant="muted">Base fare</Text>
            <Text>$86.00</Text>
          </View>
          <View className="flex-row justify-between py-0.5">
            <Text variant="muted">Seat reservation</Text>
            <Text>$4.90</Text>
          </View>
          <Separator />
          <View className="flex-row justify-between py-0.5">
            <Text variant="small" className="font-semibold">Total</Text>
            <Text variant="small" className="font-semibold">$90.90</Text>
          </View>

          <Glass interactive curvature="edge" className="flex-row items-center justify-between rounded-xl px-3 py-2.5">
            <Text variant="muted">VISA •• 4902 · receipts to amara@example.com</Text>
            <Icon name="check-circle" size="sm" color="success" />
          </Glass>
        </Glass>
      </View>
  );
}

Separator — Verticalvertical.tsx

separator/variants/vertical.tsx open

Hairline rule with orientation and spacing control.

import { SeparatorVertical } from "@/components/ui/separator/variants/vertical";

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

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

/** SeparatorVertical — vertical rule inside a schedule row. */
export function SeparatorVertical() {
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="text-white drop-shadow">Vertical — Sep 12 schedule</Text>
        <Glass interactive curvature="edge" className="h-12 flex-row items-center gap-3 rounded-xl px-3">
          <Text variant="small">9:00 am</Text>
          <Separator orientation="vertical" />
          <Text variant="small">Standup with Priya</Text>
        </Glass>
      </View>
  );
}