Stripe Rule

Un separatore decorativo che usa un repeating-linear-gradient a 45° per creare un pattern editoriale, non una semplice linea. Adatta automaticamente colore e contrasto al tema.

Esempio⁰¹

Note — L'utility CSS @utility stripe-rule è in globals.css. Per cambiare il pattern, modifica il repeating-linear-gradient e gli step (1px / 6px) lì, non qui.

Prompt LLM⁰²

Incolla in Claude o ChatGPT per generare la tua variante. Include il contesto del brand, i token e i vincoli del progetto.

Prompt · stripe-rule

Open in Claude

Sei un senior frontend engineer. Stai lavorando su un sito Next.js 16 + React 19 + Tailwind v4 in italiano, look chanhdai-inspired: colonna stretta 672px, Geist Sans + Geist Mono, hairline 1px, divisori a stripe diagonale, palette zinc.

Token CSS disponibili: --bg, --bg-alt, --fg, --fg-muted, --fg-soft, --border, --border-strong, --accent. Usa SEMPRE queste variabili tramite le utility tailwind generate (bg-bg, text-fg-muted, border-border, ecc.). Helper "cn" da "@/lib/utils". Niente librerie UI extra: solo lucide-react e tailwind-merge.

Genera un componente <StripeRule>: un divisore decorativo orizzontale.
Props:
- className?: string
- height?: number (default 6) — altezza in px.

Implementazione:
- Il pattern hatch a 45° viene da un'utility Tailwind v4 chiamata "stripe-rule" definita in globals.css con @utility, basata su repeating-linear-gradient con var(--stripe).
- Il componente è un <div role="separator" aria-hidden> con className "stripe-rule w-full" e style={{ height }}.

Constraints: server component, niente animazioni, accessibilità: solo decorativo (aria-hidden).

Output: il componente .tsx + lo snippet @utility da aggiungere a globals.css.

Esempio⁰¹

Prompt LLM⁰²

Uso tipico⁰³

Dipendenze⁰⁴

Stripe Rule

Esempio01

Prompt LLM02

Uso tipico03

Dipendenze04

Esempio⁰¹

Prompt LLM⁰²

Uso tipico⁰³

Dipendenze⁰⁴