> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Conditional Classes

> Apply CSS classes to Velt wireframe elements conditionally with velt-class.

Apply a CSS class only when a condition is true, using the same data as [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md). Use it to style state (resolved, dark mode, unread, …) without writing a new wireframe.

## Syntax

> [tab] React / Next.js
>
> ```jsx theme={null}
> <SomeVeltWireframe veltClass="<evaluation-string>" />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <some-velt-wireframe velt-class="<evaluation-string>"></some-velt-wireframe>
> ```

```text theme={null}
<evaluation-string>: 'class-name': {template-variable} <operator> 'value'
```

* **class-name:** the class to apply, in single quotes.
* **template-variable:** the variable to evaluate, in curly braces.
* **operator:** `===`, `!==`, `>`, `>=`, `<`, `<=`; combine conditions with `&&` and `||`.
* **value:** what to compare against, in single quotes for strings.

A boolean variable needs no operator: `'is-dark': {darkMode}`.

## Example

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>   <VeltCommentDialogWireframe.Header veltClass="'bg-yellow-500': {annotation.status.id} === 'IN_PROGRESS'" />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>   <velt-comment-dialog-header-wireframe velt-class="'bg-yellow-500': {annotation.status.id} === 'IN_PROGRESS'"></velt-comment-dialog-header-wireframe>
> </velt-wireframe>
> ```

## Multiple classes and the shorthand form

Separate several classes with commas. For a single class driven by one boolean, `velt-class-<name>` is shorter.

> [tab] React / Next.js
>
> ```jsx theme={null}
> // On your own markup inside a wireframe, the literal attribute passes through JSX
> <div velt-class="'is-dark': {darkMode}, 'is-resolved': {resolved}" />
>
> // Shorthand: applies the class "active" when {showReplies} is true
> <div velt-class-active="{showReplies}" />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <div velt-class="'is-dark': {darkMode}, 'is-resolved': {resolved}"></div>
>
> <!-- Shorthand: applies the class "active" when {showReplies} is true -->
> <div velt-class-active="{showReplies}"></div>
> ```

> [!NOTE]
>
> `velt-class` only toggles the class **name**: you still have to define that class in your own CSS, or nothing changes visually. Your classes land on the element alongside Velt's own, and Velt's runtime styles are high-specificity, so a rule that overrides Velt's styling needs `!important`: see [Override classes](https://velt.dev/docs/ui-customization/styling.md#override-classes).

## Related

* Many states already have a Velt class you can target directly, no directive needed: [`CSS classes`](https://velt.dev/docs/ui-customization/reference/css-classes).
* Hide the element entirely instead of restyling it: [Conditional Templates](https://velt.dev/docs/ui-customization/conditional-templates.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.