shuip-components

1---
2name: shuip-components
3description: Use when choosing which shuip item fits a need, or composing shuip components and blocks — provides the full item catalog, install/import conventions, and composition notes. Use before building UI that shuip may already provide.
4---
5 
6# Choosing & composing shuip components
7 
8## Conventions
9 
10- Install: `npx shadcn@latest add "https://shuip.plvo.dev/r/<item-name>"`.
11- Import paths by category:
12  - components → `@/components/ui/shuip/<name>`
13  - blocks → `@/components/block/shuip/<name>`
14  - react-hook-form → `@/components/ui/shuip/react-hook-form/<name>`
15  - tanstack-form → `@/components/ui/shuip/tanstack-form/<name>`
16  - tanstack-query → `@/components/ui/shuip/tanstack-query/<name>`
17- **Exports are unprefixed**: `rhf-input-field` → `InputField`, `kanban` → `Kanban`.
18- For anything form-related, use the **shuip-forms** skill — it covers the rhf/tsf field patterns in depth.
19 
20## Catalog
21 
22<!-- shuip:catalog:start -->
23**components**
24- `confirmation-dialog`
25- `copy-button`
26- `hover-reveal`
27- `search-input`
28- `side-dialog`
29- `submit-button`
30- `theme-button`
31 
32**blocks**
33- `calendar`
34- `data-table`
35- `kanban`
36- `responsive-dialog`
37- `title-section`
38 
39**react-hook-form**
40- `rhf-address-field`
41- `rhf-autocomplete-field`
42- `rhf-checkbox-field`
43- `rhf-combobox-field`
44- `rhf-date-field`
45- `rhf-date-range-field`
46- `rhf-datetime-field`
47- `rhf-inline-edit`
48- `rhf-input-field`
49- `rhf-month-field`
50- `rhf-number-field`
51- `rhf-password-field`
52- `rhf-radio-field`
53- `rhf-select-field`
54- `rhf-textarea-field`
55- `rhf-time-field`
56- `rhf-time-range`
57 
58**tanstack-form**
59- `tsf-autocomplete-field`
60- `tsf-checkbox-field`
61- `tsf-combobox-field`
62- `tsf-date-field`
63- `tsf-date-range-field`
64- `tsf-datetime-field`
65- `tsf-form-context`
66- `tsf-inline-edit`
67- `tsf-input-field`
68- `tsf-month-field`
69- `tsf-password-field`
70- `tsf-radio-field`
71- `tsf-select-field`
72- `tsf-submit-button`
73- `tsf-textarea-field`
74- `tsf-time-field`
75- `tsf-time-range`
76 
77**tanstack-query**
78- `tsq-query-boundary`
79<!-- shuip:catalog:end -->
80 
81## Composition notes
82 
83- `responsive-dialog` composes `side-dialog`; installing it resolves the dependency.
84- `confirmation-dialog` for destructive-action confirmation; `side-dialog` for sheet-style panels.
85- `query-boundary` wraps data-fetching subtrees so you don't hand-roll loading/error UI.
86- Form fields are never used alone — they compose inside a form. Use **shuip-forms**.
87 
88## Common mistakes
89 
90| Mistake | Reality |
91// … truncated