Base Components

Divider

A versatile divider component used to create visual separation between content.

Create a `divider.tsx` file and paste the following code into it.

/components/ui/divider.tsx

// AlignUI Divider v0.0.0
 
import { tv, type VariantProps } from '@/utils/tv';
 
const DIVIDER_ROOT_NAME = 'DividerRoot';
 
export const dividerVariants = tv({
  base: 'relative flex w-full items-center',
  variants: {
    variant: {
      line: 'h-0 before:absolute before:left-0 before:top-1/2 before:h-px before:w-full before:-translate-y-1/2 before:bg-stroke-soft-200',
      'line-spacing': [
        // base
        'h-1',
        // before
        'before:absolute before:left-0 before:top-1/2 before:h-px before:w-full before:-translate-y-1/2 before:bg-stroke-soft-200',
      ],
      'line-text': [
        // base
        'gap-2.5',
        'text-subheading-2xs text-text-soft-400',
        // before
        'before:h-px before:w-full before:flex-1 before:bg-stroke-soft-200',
        // after
        'after:h-px after:w-full after:flex-1 after:bg-stroke-soft-200',
      ],
      content: [
        // base
        'gap-2.5',
        // before
        'before:h-px before:w-full before:flex-1 before:bg-stroke-soft-200',
        // after
        'after:h-px after:w-full after:flex-1 after:bg-stroke-soft-200',
      ],
      text: [
        // base
        'px-2 py-1',
        'text-subheading-xs text-text-soft-400',
      ],
      'solid-text': [
        // base
        'bg-bg-weak-50 px-5 py-1.5 uppercase',
        'text-subheading-xs text-text-soft-400',
      ],
    },
  },
  defaultVariants: {
    variant: 'line',
  },
});
 
function Divider({
  className,
  variant,
  ...rest
}: React.HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof dividerVariants>) {
  return (
    <div
      role='separator'
      className={dividerVariants({ variant, class: className })}
      {...rest}
    />
  );
}
Divider.displayName = DIVIDER_ROOT_NAME;
 
export { Divider as Root };