> ## 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](/docs/ui-customization/template-variables). Use it to style state (resolved, dark mode, unread, …) without writing a new wireframe.

## Syntax

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <SomeVeltWireframe veltClass="<evaluation-string>" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <some-velt-wireframe velt-class="<evaluation-string>"></some-velt-wireframe>
    ```
  </Tab>
</Tabs>

```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

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

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## Multiple classes and the shorthand form

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

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

<Note>
  Your classes land on the element alongside Velt's own. Velt's runtime styles are high-specificity, so a rule that overrides Velt's styling still needs `!important`: see [Override classes](/docs/ui-customization/styling#override-classes).
</Note>

## Related

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