---
name: react-ui
description: Use when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. Covers JSX/React conventions, Twind/Tailwind styling, React version pinning, the view-source link requirement, and what to avoid (template-string HTML, external assets).
triggers: [react, jsx, tsx, ui, frontend, component, dashboard, page, app, twind, tailwind, styling, css, html]
---
# React UI
For any val that renders a UI, prefer to build it with React components in `.tsx` files, unless the user states otherwise. The `templates/react-hono-starter` template is set up for this — start there with `remix_val` instead of building from scratch.
## File conventions
Put markup, styles, and scripts in real files — avoid template literal strings (e.g. `new Response(\`...\`)`). Code in template strings has no syntax highlighting, no linting, no type checking, and is unreviewable.
- `.tsx` — React/JSX components, any UI with logic or interactivity
- `.html` — purely static markup
- `.ts` — server code and scripts
Build UI **component by component** in `.tsx` files. Compose small components rather than rendering one giant page.
## Styling: Twind + Tailwind
Prefer Twind to apply Tailwind utility classes at runtime — no build step required. Add the script to your HTML shell:
```html
```
Then use Tailwind classes directly in JSX:
```tsx
Hello
```
Avoid inline `