Komponenty

Stránka Komponenty ukazuje všechny díly rozdělené do kategorií, třeba Navbary, Tlačítka, Formuláře nebo Pozadí. Kategorie najdeš i v menu Komponenty nahoře, stačí na něj najet myší.

Každá karta je skutečná komponenta, ne obrázek. Můžeš na ni najet, kliknout nebo do ní psát. Štítek Zdarma nebo Pro říká, v jakém tarifu je.

Kliknutím na kartu otevřeš detail. Ten má čtyři části:

1. 1

   Náhled

   Velká ukázka. Vlevo nahoře jsou varianty: jedním kliknutím přepneš třeba na rychlejší, větší nebo tišší verzi. Vpravo nahoře je Přehrát znovu.

2. 2

   Vlastnosti

   Texty, rychlost, velikost a další volby. Každá změna se hned projeví v náhledu.

3. 3

   Vzhled

   Barva akcentu, zaoblení rohů a pozadí náhledu. Platí jen pro tuhle komponentu a pamatuje se.

4. 4

   Kód

   Hotový kód s tvým nastavením a příkaz pro instalaci. Stačí zkopírovat.

Komponentu přidáš podle poslední části adresy její stránky. Magnetické tlačítko je na adrese /components/magnetic, takže:

$npx nex-ui add magnetic

Pak ji použiješ jako kteroukoli jinou komponentu:

import { MagneticButton } from "@/components/nex-ui/magnetic";

export function Hero() {
  return <MagneticButton strength={0.4}>Začít</MagneticButton>;
}

Všechno, co nastavíš v hřišti, je i ve vlastnostech komponenty v kódu. Soubor je navíc tvůj, takže v něm můžeš změnit cokoli dalšího. Aktualizace knihovny tvoji kopii nepřepíšou.

Komponenty berou barvy a zaoblení z proměnných v Tailwind tématu. Když je změníš na jednom místě, přizpůsobí se všechny komponenty najednou.

@theme {
  --color-ink: #130709;      /* pozadí */
  --color-ink-2: #1e0b0e;    /* plochy a karty */
  --color-line: #3a1a1e;     /* čáry */
  --color-bone: #f4e9e6;     /* text */
  --color-ash: #a08a8c;      /* tlumený text */
  --color-signal: #ff3347;   /* akcent */
  --color-blood: #b3122a;    /* tmavší akcent */
}

Animované komponenty respektují nastavení systému Omezit pohyb. Aby to platilo v celé aplikaci, obal ji do MotionConfig:

import { MotionConfig } from "motion/react";

export function Providers({ children }) {
  return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
}

Interaktivní komponenty jdou ovládat klávesnicí a mají popisky pro čtečky obrazovky. Když měníš texty, popisky zachovej.