---
title: Kasutajaliidese teegi valik
description: Aitab valida esiotsa ülesandeks sobiva teegi kureeritud nimekirjast: numbrid, OTP-väljad, graafikud, käsumenüüd jm.
category: Design
sublabel: Disainiinseneeria
author: Emil Kowalski
tags: 
license: MIT
source: https://github.com/emilkowalski/skills
---

# Õige teegi valimine

## Esialgne vastus

Kui see oskus käivitatakse ilma konkreetse küsimuseta, vasta ainult:

> Olen valmis valima sinu ülesande jaoks õige teegi; minu valikud tulevad Emil Kowalski kureeritud nimekirjast.

Ära anna muud teavet, kuni kasutaja esitab küsimuse.

Otsinguoskus. Kui käivitatakse ülesandega („vajan toast’e“, „mida peaksin lohistamiseks kasutama?“), sobita ülesanne alloleva kureeritud nimekirjaga ja soovita teeki. Need on teadlikud, maitsepõhised valikud — ära asenda nimekirjaväliste alternatiividega, kui kasutaja seda ei küsi või ülesanne tõesti ei ole kaetud.

## Kuidas seda kasutada

1. **Tuvasta ülesanne**, mitte teek, mida kasutaja nimetas. „Vajan rippmenüü näitamist“ on UI-primitiivide ülesanne (base-ui), isegi kui nad küsisid millegi muu kohta.
2. **Kontrolli, mis on juba installitud.** Vaata esmalt `package.json`-i. Kui projekt juba kasutab nimekirjas olevat teeki, kasuta seda. Kui kasutab konkurenti (nt react-window Virtuoso asemel), märgi soovitus ära, aga ära vaheta sõltuvust ilma küsimata.
3. **Soovita üht teeki**, ütle ühe lausega, milleks see on, ning installi/ühenda see, kui see on päringu osa. Ära esita valikumenüüd, kui nimekirjas on selge vastus.
4. Kui ülesanne ei ole nimekirjas kaetud, ütle seda selgelt ja soovita oma teadmiste põhjal — aga tee selgeks, et oled kureeritud nimekirjast väljas.

## Nimekiri

### UI komponendid ja primitiivid

| Ülesanne | Teek |
| --- | --- |
| Stiliseerimata, ligipääsetavad UI komponendid (dialogid, popover’id, menüüd, select’id…) | [base-ui](https://base-ui.com) |
| Käsumenüüd (⌘K paletid) | [cmdk](https://cmdk.paco.me) |
| Toast’id / teavitused | [Sonner](https://sonner.emilkowal.ski) |
| Ühekordsed parooli- / kinnituskoodi sisendid | [input-otp](https://input-otp.rodz.dev) |
| Kohandatavad GUI-d / juhtpaneelid | [Leva](https://github.com/pmndrs/leva) — [dialkit](https://joshpuckett.me/dialkit) on alternatiiv |

### Liikumine ja visuaalid

| Ülesanne | Teek |
| --- | --- |
| Üldotstarbeline animatsioon (vedrud, paigutuse animatsioonid, sisenemine/väljumine) | [motion](https://motion.dev) (Framer Motion) |
| Numbrite animeerimine (loendurid, hinnad, statistikad) | [NumberFlow](https://number-flow.barvian.me) |
| Animeeritud tekstikomponendid | [torph](https://torph.lochie.me/) |
| 3D gloobused | [Cobe](https://cobe.vercel.app) |
| Dünaamilised OG-pildid (HTML/CSS → SVG/PNG) | [Satori](https://github.com/vercel/satori) |
| Süntaksi esiletõstmine | [shiki](https://shiki.style) |

Kasuta motion’it, kui vajad vedrusid, paigutuse animatsioone, väljumisanimaatsioone või žestipõhiseid väärtusi. Lihtne hover või fade seda ei vaja — seal on õige tööriist tavalised CSS-üleminekud.

### Diagrammid

| Ülesanne | Teek |
| --- | --- |
| Reaalajas / voogdiagrammid | [Liveline](https://github.com/benjitaylor/liveline) |
| Üldised diagrammid (staatilised või interaktiivsed juhtpaneelid) | [recharts](https://recharts.org) |

Jaotus: kui andmepunktid saabuvad otseülekandes ja diagramm kerib ajaga, kasuta Liveline’i. Kõik muu on recharts.

### Interaktsioon ja jõudlus

| Ülesanne | Teek |
| --- | --- |
| Lohistamine (drag and drop) | [dnd kit](https://dndkit.com) |
| Virtualiseerimine (pikad loendid, suured tabelid) | [Virtuoso](https://virtuoso.dev) |

### Olek ja stiilimine

| Ülesanne | Teek |
| --- | --- |
| Olekuhaldus | [zustand](https://zustand.docs.pmnd.rs) |
| `className` stringide tingimuslik koostamine | [clsx](https://github.com/lukeed/clsx) |
| Tüübiohutu, variandipõhine stiilimine Tailwind’ile | [cva](https://cva.style) |
| Teema vahetamine / tume režiim (ilma välgatuseta laadimisel) | [next-themes](https://github.com/pacocoursey/next-themes) |

Stiilimise jaotus: clsx juhuslike tingimuslike klasside jaoks; cva, kui komponendil on päris variandid (suurus, intent, olek), mis väärivad tüübitud API-d. Need sobivad kokku — cva kasutab sisemiselt clsx-stiilis sisendeid.

## Levinud valestimõistmised, mida tabada

- **Käsitööna või modaalteegiga ehitatud toast’id** → Sonner on just selleks olemas.
- **`<div>`-põhine rippmenüü/dialog käsitsi fookusehaldusega** → base-ui, mis haldab ligipääsetavust, fookuse lõksu ja sulgemist.
- **Numbri animeerimine teksti uuesti renderdades** → NumberFlow tegeleb numbrite üleminekutega õigesti.
- **1000+ realise loendi otse renderdamine** → Virtuoso enne lehekülgede häkkimist.
- **`useState`-komponendi kohta props’ide võrk jagatud oleku jaoks** → zustand.
- **Template-literal className ternarid kolme tingimuse sügavusel** → clsx (või cva, kui see on variandikujuline).