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.

Na stránce každé komponenty najdeš u kódu i příkaz pro instalaci. Komponenta se jmenuje podle poslední části adresy své stránky: magnetické tlačítko je na /components/magnetic-button.

Komponenty zdarma nainstaluješ rovnou z adresy:

$npx shadcn@latest add https://nex-ui.eu/r/underline-navbar.json

Komponenty Pro a Ultimate potřebují token, aby registr poznal tvůj plán. Vytvoř si ho na stránce Účet, ulož ho do .env.local jako NEXUI_TOKEN=nxu_… a jednou přidej registr nex-ui do components.json:

{
  "registries": {
    "@nex-ui": {
      "url": "https://nex-ui.eu/r/{name}.json",
      "headers": { "Authorization": "Bearer ${NEXUI_TOKEN}" }
    }
  }
}

Pak instaluješ podle jména (funguje to i pro komponenty zdarma):

$npx shadcn@latest add @nex-ui/magnetic-button

Pak ji použiješ jako kteroukoli jinou komponentu:

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

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.