Separator

Элемент-разделитель, доступный для программ чтения с экрана.

Oracul DS

Доступные примитивы без навязанных стилей для быстрой разработки интерфейсов и дизайн-систем.

Блог

Документация

Исходники

Релизы

import { Separator } from "@/components/ui/separator";

export default function Particle() {
  return (
    <div className="max-w-72">
      <div className="flex flex-col gap-1">
        <h4 className="font-medium text-sm">Oracul DS</h4>
        <p className="text-muted-foreground text-sm">
          Доступные примитивы без навязанных стилей для быстрой разработки
          интерфейсов и дизайн-систем.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex items-center gap-4 text-sm">
        <div>Блог</div>
        <Separator orientation="vertical" />
        <div>Документация</div>
        <Separator orientation="vertical" />
        <div>Исходники</div>
        <Separator orientation="vertical" />
        <div>Релизы</div>
      </div>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/separator

Использование

import { Separator } from "@/components/ui/separator"

<Separator />

API

Separator

Стилизованная обёртка для Separator из Base UI. По умолчанию отображается в виде горизонтальной линии с приглушённым цветом фона.

На этой странице

Установка Использование API Separator