---
trigger: model_decision
description: When working on UI
---

# Kobalte for Solid.js Coding Rules

## Core Mandate
1. **Always use [Kobalte](https://kobalte.dev/)** for UI components in Solid.js (e.g., Popovers, Dialogs, Selects, Tooltips, etc.).
2. **DO NOT** implement custom UI logic or accessibility patterns from scratch unless explicitly requested by the user.
3. **DO NOT** use other UI libraries for Solid.js unless explicitly requested.

## Implementation Guidelines
- **Importing**: Always import from `@kobalte/core`.
- **Structure**: Follow the standard Kobalte pattern: `Component.Root`, `Component.Trigger`, `Component.Portal`, `Component.Content`, etc.
- **Styling**: 
  - Use **Tailwind CSS** for all styling.
  - Apply styles directly to the Kobalte primitive components using the `class` prop.
  - Use `data-*` attributes provided by Kobalte (e.g., `data-expanded`, `data-disabled`) for state-based styling in Tailwind.
- **Portals**: Use `<Popover.Portal>` or `<Dialog.Portal>` to ensure correct DOM placement and stacking context.
- **Animations**: Prefer Tailwind's `animate-in`, `fade-in`, `zoom-in`, etc. (from `tailwindcss-animate` if available, or custom animations) combined with Kobalte's state attributes.

## Example Pattern (Popover)
```jsx
import { Popover } from "@kobalte/core";

<Popover.Root>
  <Popover.Trigger class="...">...</Popover.Trigger>
  <Popover.Portal>
    <Popover.Content class="...">
      <Popover.Arrow />
      <Popover.Title class="...">...</Popover.Title>
      <Popover.Description class="...">...</Popover.Description>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```

## Exceptions
- Only bypass Kobalte if the user explicitly says: "Do not use Kobalte for this" or "Build this from scratch".
- If a component is not available in Kobalte, ask for clarification before choosing an alternative.