Divider

(A) One-liner

Divider is a horizontal separator component that visually divides content areas. It provides thin line (variant="line") and thick divider for section separation (variant="thick"), and layout margins can be adjusted with horizontalMargin/verticalMargin.

(B) Installation (Track A / Track B)

Track A (CLI / local install)

1. Add Divider

pnpm dlx @fleet-ui/cli add Divider

2. Import example

import { Divider } from '@fleet-ui/local/components';

Track B (NPM package)

1. Import example

import { Divider } from '@fleet-ui/components';

(D) Core Features & Usage

D-1. Most Common Scenario (Minimal Example)

import { Divider } from '@fleet-ui/components';
 
export function Example() {
  return <Divider />;
}

D-2. Section Separation: variant="thick"

import { Divider } from '@fleet-ui/components';
 
export function Example() {
  return <Divider variant="thick" size="md" verticalMargin="lg" />;
}

D-3. Left/Right Margin: horizontalMargin

When horizontalMargin is not none, it internally switches to width: 'auto' so you can create a separator that "looks like it has padding."

import { Divider } from '@fleet-ui/components';
 
export function Example() {
  return <Divider horizontalMargin="md" />;
}

(E) Internal State / Shared Value / Animation

Divider has no internal state/animation (shared value). Instead, variant + size combination is interpreted with compoundVariants to determine actual height (thickness).

Implementation examples:

• variant="line" + size="sm" → StyleSheet.hairlineWidth
• variant="thick" + size="md" → approx. 15px

(F) Accessibility

Recommended rules:

• (Web) Verify keyboard/focus navigation is natural.
• (Common) Verify state changes are sufficiently conveyed to screen readers.

Divider is set to not appear in accessibility tree since it's for decoration/separation purposes.

• accessibilityRole="none"
• importantForAccessibility="no"

(G) Props Table

Reference: DividerProps from packages/components/src/Divider/Divider.types.ts. DividerProps extends ViewProps.

ViewProps Inheritance (Summary)

DividerProps extends ViewProps, so basic layout props like style are supported.