Separator

The ownable Separator install gives your app a local divider wrapper and nearby style surface for horizontal and vertical grouping patterns while keeping the generated source editable in the feature that owns the layout.

Why own Separator locally

Separator looks simple, but teams often need local control over contrast, density, semantic usage, and vertical sizing once dividers start appearing in toolbars, settings panes, and dashboard stacks.

Adjust divider thickness, color, and spacing without waiting on a package release.
Keep toolbar and content-stack treatments consistent with the feature that owns them.
Extend the local wrapper if your product needs additional variant or token plumbing later.

What the install includes

The registry-backed separator install writes the primitive bridge, the wrapper component, template, shared stylesheet, and export barrel under your app so the divider contract can evolve with local layout needs.

Ownable Install

Install Separator from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add separator

npx tailng add separator

Generated files

The command scaffolds local files under src/app/tailng-ui/separator.

src/app/tailng-ui/separator/tng-separator-primitive.ts
src/app/tailng-ui/separator/tng-separator.ts
src/app/tailng-ui/separator/tng-separator.html
src/app/tailng-ui/separator/tng-separator.css
src/app/tailng-ui/separator/index.ts

Import in your feature module/component

import { TngSeparator, TngSeparatorPrimitive } from './tailng-ui/separator';

Usage

<section class="stack">
  <h3>Account</h3>
  <tng-separator></tng-separator>
  <p>Connected projects</p>
</section>

<div class="toolbar">
  <button type="button">Grid</button>
  <tng-separator orientation="vertical"></tng-separator>
  <button type="button">List</button>
</div>