Brand

Bracketed

A title between two corner ticks, as the web site sets every heading.

stablev0.1.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.
bunx shadcn@3 add @fastrp/bracketed

Examples

Default

Open alone

Şehir seni bekliyor

Nasıl oynanır

API

<Bracketed />

A title in the brand's frame: corner ticks at its top-left and bottom-left, as the web site marks every heading. It sizes to its content; put margins on it rather than on the heading inside, so the ticks hug the words.

PropTypeDefaultNotes
size"sm" | "md" | "lg"lg
tone"primary" | "line" | "foreground"—

Dependencies

npm

  • None

Registry

Source

components/ds/bracketed.tsxShow
import type { HTMLAttributes } from 'react';
import { CornerTicks, type CornerTicksProps } from '@/components/ds/corner-ticks';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

export type BracketedProps = HTMLAttributes<HTMLDivElement> & {
  size?: CornerTicksProps['size'];
  tone?: CornerTicksProps['tone'];
};

/**
 * A title in the brand's frame: corner ticks at its top-left and bottom-left, as the web site marks
 * every heading. It sizes to its content; put margins on it rather than on the heading inside, so
 * the ticks hug the words.
 */
export function Bracketed({ size = 'lg', tone, className, children, ...props }: BracketedProps) {
  return (
    <div className={cn('relative w-fit px-4 py-3 md:px-5 md:py-4', className)} {...props}>
      <CornerTicks corners={['top-left', 'bottom-left']} size={size} tone={tone} />
      {children}
    </div>
  );
}