🟢 Separator

Basic

NSeparator - used to separate the content.

Variant

separator="{variant}" - change the variant of the separator.

Type	Description
`solid`	The default variant.
`dashed`	The dashed variant.
`dotted`	The dotted variant.

Solid

Dashed

Dotted

Color

separator="{variant}-{color}" - change the color of the separator.

You can use any color provided by the Tailwind CSS color palette, the default is gray. You can also add your own colors to the palette through the Configuration section.

Warning Area

Success Green

Dotted Yellow

Orientation

orientation="{value}" - change the orientation of the separator's direction.

Value	Description
`horizontal`	The default direction.
`vertical`	The vertical direction.

Position

separator-position="{value}" - change the position of the label content.

Position	Orientation	Description
`center`	`horizontal` `vertical`	The default position.
`left`	`horizontal`	The left position.
`right`	`vertical`	The right position.
`top`	`horizontal`	The top position.
`bottom`	`vertical`	The bottom position.

Size

size="{size}" - change the size of the separator.

🚀 You can freely adjust the size of the separator using any size imaginable. No limits exist, and you can use breakpoints such as sm:sm, xs:lg to change size based on screen size or states such as hover:lg, focus:3xl to change size based on input state and more.

The padding and font-size of the separator scale depends on the size. If you want to change the font-size and padding simultaneously, you can always customize it using utility classes.

Props

import type { SeparatorProps } from 'radix-vue'
import type { HTMLAttributes } from 'vue'

type Extensions = SeparatorProps & { class?: HTMLAttributes['class'], label?: string }

export interface NSeparatorProps extends Extensions {
  /**
   * Allows you to add `UnaUI` separator preset properties,
   * Think of it as a shortcut for adding options or variants to the preset if available.
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/separator.ts
   * @example
   * separator="solid-green"
   */
  separator?: string
  /**
   * Allows you to change the orientation and position of the separator.
   *
   * @default horizontal-center
   */
  separatorPosition?: HTMLAttributes['class']
  /**
   * Allows you to change the size of the separator.
   *
   * @default md
   *
   * @example
   * size="sm" | size="2cm" | size="2rem" | size="2px"
   */
  size?: string
  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/separator.ts
   */
  una?: {
    separator?: HTMLAttributes['class']
    separatorContent?: HTMLAttributes['class']

    separatorDefaultVariant?: HTMLAttributes['class']
  }
}

Presets

type SeparatorPrefix = 'separator'

export const staticSeparator: Record<`${SeparatorPrefix}-${string}` | SeparatorPrefix, string> = {
  // base
  'separator': 'text-md shrink-0 relative',
  'separator-default-variant': 'separator-solid-gray',
  'separator-content': 'text-0.75em text-muted bg-base absolute flex justify-center items-center',

  // orientation states
  'separator-horizontal': 'h-px my-4 w-full border-t-0.0625em',
  'separator-vertical': 'w-px mx-4 h-full border-l-0.0625em',
  'separator-content-horizontal': 'h-1px py-1 px-2',
  'separator-content-vertical': 'w-1px px-1 py-2',

  // horizontal positions
  'separator-position-left': 'left-6 top-1/2 -translate-y-1/2',
  'separator-position-right': 'right-6 top-1/2 -translate-y-1/2',
  'separator-position-center': 'left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2',

  // vertical positions
  'separator-position-bottom': 'bottom-4 left-1/2 -translate-x-1/2',
  'separator-position-top': 'top-4 left-1/2 -translate-x-1/2',

  // static variants
  'separator-solid-gray': 'border-base',
}

export const dynamicSeparator = [
  // dynamic variants
  [/^separator-solid(-(\S+))?$/, ([, , c = 'gray']) => `border-solid border-${c}-200 dark:border-${c}-700/58`],
  [/^separator-dashed(-(\S+))?$/, ([, , c = 'gray']) => `border-dashed border-${c}-200 dark:border-${c}-700/58`],
  [/^separator-dotted(-(\S+))?$/, ([, , c = 'gray']) => `border-dotted border-${c}-200 dark:border-${c}-700/58`],
]

export const separator = [
  ...dynamicSeparator,
  staticSeparator,
]

Component

<script setup lang="ts">
import type { NSeparatorProps } from '../../types'
import { Separator } from 'radix-vue'
import { computed } from 'vue'
import { cn, omitProps } from '../../utils'

const props = withDefaults(defineProps<NSeparatorProps>(), {
  orientation: 'horizontal',
})

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = omitProps(props, ['una'])

  return delegated
})
</script>

<template>
  <Separator
    v-bind="omitProps(delegatedProps, ['una', 'separatorPosition'])"
    :class="
      cn(
        'separator',
        props.una?.separatorDefaultVariant || 'separator-default-variant',
        props.class,
        props.una?.separator,
        props.orientation === 'vertical' ? 'separator-vertical' : 'separator-horizontal',
      )
    "
  >
    <span
      v-if="props.label || $slots.default"
      :separator-position="props.separatorPosition || 'center'"
      :class="cn(
        'separator-content',
        props.una?.separatorContent,
        props.orientation === 'vertical' ? 'separator-content-vertical' : 'separator-content-horizontal',
      )"
    >
      <slot>
        {{ props.label }}
      </slot>
    </span>
  </Separator>
</template>

Edit this page on GitHub

Components🟢 Select

Components🟢 Skeleton