Divider

A thin line that separates content into groups.

A hairline that separates content, drawn in the platform separator color. Full-bleed by default, with inset and middle variants for list alignment, plus a vertical orientation.

Installation

npx touchcn add divider

Usage

<tcn-divider />
<tcn-divider variant="inset" />
<tcn-divider vertical />

import { TcnDivider } from '@/components/ui/divider';

<TcnDivider />
<TcnDivider variant="inset" />
<TcnDivider vertical />

<script setup lang="ts">
import { TcnDivider } from '@/components/ui/divider';
</script>

<template>
  <TcnDivider />
  <TcnDivider variant="inset" />
  <TcnDivider vertical />
</template>

Props

Prop	Type	Default	Description
`variant`	`'full' \| 'inset' \| 'middle'`	`'full'`	Full-bleed, list-aligned inset, or both ends.
`vertical`	`boolean`	`false`	Draw a vertical rule that stretches to fill.

Source · Angular

export * from './tcn-divider';

import { booleanAttribute, Component, computed, ElementRef, inject, input } from '@angular/core';
import { cn } from '@touchcn/core';

export type TcnDividerVariant = 'full' | 'inset' | 'middle';

const variantClass: Record<TcnDividerVariant, string> = {
  full: '',
  inset: 'tcn-divider-inset',
  middle: 'tcn-divider-middle',
};

/**
 * A hairline separator in `--color-separator`. Full-bleed by default; `inset`
 * aligns to list-row text, `middle` insets both ends. Set `vertical` to draw a
 * 1px column that stretches to its flex parent. Pure chrome — all styling lives
 * in `theme.css`.
 */
@Component({
  selector: 'tcn-divider',
  template: '',
  host: {
    role: 'separator',
    '[attr.aria-orientation]': "vertical() ? 'vertical' : 'horizontal'",
    '[class]': 'classes()',
  },
})
export class TcnDivider {
  private readonly authored = inject(ElementRef<HTMLElement>).nativeElement.getAttribute('class') ?? '';

  readonly variant = input<TcnDividerVariant>('full');
  readonly vertical = input(false, { transform: booleanAttribute });

  protected readonly classes = computed(() =>
    cn('tcn-divider', this.vertical() ? 'tcn-divider-vertical' : '', variantClass[this.variant()], this.authored),
  );
}

Source · React

export * from './tcn-divider';

import { forwardRef } from 'react';
import type { ComponentPropsWithoutRef } from 'react';
import { cn } from '@touchcn/core';

export type TcnDividerVariant = 'full' | 'inset' | 'middle';

const variantClass: Record<TcnDividerVariant, string> = {
  full: '',
  inset: 'tcn-divider-inset',
  middle: 'tcn-divider-middle',
};

export interface TcnDividerProps extends ComponentPropsWithoutRef<'div'> {
  variant?: TcnDividerVariant;
  vertical?: boolean;
}

/**
 * A hairline separator in `--color-separator`. Full-bleed by default; `inset`
 * aligns to list-row text, `middle` insets both ends. Set `vertical` to draw a
 * 1px column that stretches to its flex parent. Pure chrome — styling in
 * `theme.css`.
 */
export const TcnDivider = forwardRef<HTMLDivElement, TcnDividerProps>(function TcnDivider(
  { variant = 'full', vertical = false, className, ...props },
  ref,
) {
  return (
    <div
      ref={ref}
      role="separator"
      aria-orientation={vertical ? 'vertical' : 'horizontal'}
      className={cn('tcn-divider', vertical && 'tcn-divider-vertical', variantClass[variant], className)}
      {...props}
    />
  );
});

Source · Vue

<script lang="ts">
export type TcnDividerVariant = 'full' | 'inset' | 'middle';

const variantClass: Record<TcnDividerVariant, string> = {
  full: '',
  inset: 'tcn-divider-inset',
  middle: 'tcn-divider-middle',
};
</script>

<script setup lang="ts">
import { computed } from 'vue';
import { cn } from '@touchcn/core';

const props = withDefaults(defineProps<{ variant?: TcnDividerVariant; vertical?: boolean }>(), {
  variant: 'full',
  vertical: false,
});

/**
 * A hairline separator in `--color-separator`. Full-bleed by default; `inset`
 * aligns to list-row text, `middle` insets both ends. Set `vertical` to draw a
 * 1px column that stretches to its flex parent. Pure chrome — styling in
 * `theme.css`.
 */
const classes = computed(() =>
  cn('tcn-divider', props.vertical && 'tcn-divider-vertical', variantClass[props.variant]),
);
</script>

<template>
  <div role="separator" :aria-orientation="vertical ? 'vertical' : 'horizontal'" :class="classes" />
</template>

export { default as TcnDivider } from './TcnDivider.vue';
export type { TcnDividerVariant } from './TcnDivider.vue';