Separator

Docs

Separator

Visually or semantically separates content.

Preview

Code

import { UbSeparatorDirective } from '@/components/ui/separator'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'separator-demo-new-york',
  imports: [UbSeparatorDirective],
  template: `
    <div>
      <div class="space-y-1">
        <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
        <p class="text-sm text-muted-foreground">
          An open-source UI component library.
        </p>
      </div>
      <div ubSeperator class="my-4"></div>
      <div class="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <div ubSeperator orientation="vertical"></div>
        <div>Docs</div>
        <div ubSeperator orientation="vertical"></div>
        <div>Source</div>
      </div>
    </div>
  `,
})
export class SeparatorNewYork { }

import { UbSeparatorDirective } from '@/components/ui/separator'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'separator-demo-default',
  imports: [UbSeparatorDirective],
  template: `
    <div>
      <div class="space-y-1">
        <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
        <p class="text-sm text-muted-foreground">
          An open-source UI component library.
        </p>
      </div>
      <div ubSeperator class="my-4"></div>
      <div class="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <div ubSeperator orientation="vertical"></div>
        <div>Docs</div>
        <div ubSeperator orientation="vertical"></div>
        <div>Source</div>
      </div>
    </div>

    `,
})
export class SeparatorDemoDefault { }

Installation

CLI

Manual

npx shadcn-ng@latest add separator

Copy and paste the following code into your project.

import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'

@Directive({
  standalone: true,
  selector: '[ubSeperator]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbSeparatorDirective {
  readonly class = input<string>()
  readonly orientation = input<'horizontal' | 'vertical'>('horizontal')

  protected computedClass = computed(() =>
    cn(
      'shrink-0 bg-border',
      this.orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
      this.class(),
    ),
  )
}

import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'

@Directive({
  standalone: true,
  selector: '[ubSeperator]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbSeparatorDirective {
  readonly class = input<string>()
  readonly orientation = input<'horizontal' | 'vertical'>('horizontal')

  protected computedClass = computed(() =>
    cn(
      'shrink-0 bg-border',
      this.orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
      this.class(),
    ),
  )
}

Update the import paths to match your project setup.

Usage

import { UbSeparatorDirective } from "@/components/ui/separator.directive";

<div ubSeparator></div>

Input Skeleton