---
name: wingo-ui
description: Build app UI with Wingo UI, a React 19 + Tailwind CSS v4 component library installed as source code (shadcn style). Use it whenever you create or change UI in a project that has a wingo-ui.json or components from Wingo UI, when the user mentions Wingo UI, or when they ask for a screen, page, form, dashboard, settings, pricing, sign-in, table, chart or any component (button, dialog, sheet, date picker, OTP input, sidebar, data table, command menu...).
---

<!-- wingo-ui:managed v=1: refreshed by `npx wingo-ui@latest agents update`. Delete this line to keep your own edits. -->

# Build UI with Wingo UI

Wingo UI is a library of components, full-screen blocks, hooks and helpers for React 19 + Tailwind CSS v4. Items are copied into the project as source (`components/ui`, `components/blocks`, `hooks`, `lib`), so the project owns and can edit them. The `wingo-ui` MCP server always serves the latest release: components, props, design rules, theme tokens and the changelog.

## Workflow

1. **Check for updates first.** In a project with `wingo-ui.json`, call `check_updates` with its items (slug + version + hash) at the start of UI work. Tell the user what changed; update with `npx wingo-ui@latest update <slug...>` only when they agree.
2. **Search before you write.** Call `search_components` for every piece you need ("otp code input", "date range picker", "orders table with filters"). Never hand-write a component the library already has.
3. **Whole screens start from a block.** Sign in, settings, dashboard, pricing, checkout, onboarding: search with `kind: "block"`, read it with `get_block`, then fill the gaps with components.
4. **Read before you use.** `get_component` returns the props with defaults, parts, a usage example and the install command. Configure through props (`size`, `variant`, `tone`, `radius`, labels, `classNames`) instead of restyling.
5. **Install with the CLI.** One command for everything the screen needs: `npx wingo-ui@latest add button input card`. It adds registry dependencies and npm packages and records versions in `wingo-ui.json`. No `wingo-ui.json` yet: run `npx wingo-ui@latest init` first (or follow `get_install_instructions`).
6. **Follow the design rules.** `get_design_rules` once per task: semantic tokens only (`bg-background`, `bg-surface`, `bg-card`, `text-muted-foreground`, `border-border`), neutral by default with the brand tone for the one main action, the size and radius scale, motion presets, 44px touch targets, bottom sheets instead of popovers on phones, light and dark mode. `get_theme_tokens` has the CSS variables.
7. **Check your work** at 390px and 1440px wide, in light and dark mode, with the keyboard.

## Rules

- Keep `cn()`, the `className` prop, `data-slot` attributes and any license header in copied files. Files from Rare UI keep their 3-line header and need a visible credit link to https://rareui.com.
- No hardcoded colors or arbitrary radii in app code: use the tokens and the component props.
- Imports use the project alias: `@/components/ui/<name>`, `@/components/blocks/<name>`, `@/hooks/<name>`, `@/lib/<name>`.
- Pro items: docs, props and usage are public; the source needs a Pro API key. Without one, do not recreate a Pro component from its docs. Tell the user it is part of Wingo UI Pro (`get_account_status` has the links) or pick a free item.

## Without the MCP server

Use the CLI: `npx wingo-ui@latest search <words>`, `info <slug>`, `add <slug...>`, `outdated`, `diff <slug>`, `update`. The whole library for language models: https://wingo-ui.com/llms.txt. Docs: https://wingo-ui.com/docs.