Migration - Radix Vue to Reka UI ​

Installation ​

First and foremost, you need to install the latest reka-ui.

$ npm add reka-ui

Congratulation! 🎉 Now that you've installed the above package, let's perform the migration! The first 2 steps are relatively simple. Just do a global search and replace for the following changes.

Codemods ​

To assist with the upgrade from Radix Vue to Reka UI, we collaborated with the Codemod team to automatically update your code to many of the new updates and patterns with open-source codemods. You can run the following command to automatically migrate to Reka UI:

npx codemod reka-ui/migration-recipe

The migration recipe will run the following codemods from the radix-vue Codemod repository:

• reka-ui/import-update
• reka-ui/update-css-and-data-attributes
• reka-ui/update-combobox-filter
• reka-ui/rename-controlled-state
• reka-ui/remove-calendar-step-prop

Import Statement Changes ​

The primary change in imports is replacing radix-vue with reka-ui.

<script setup lang="ts">
import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'radix-vue'
import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'reka-ui'
</script>

npx codemod reka-ui/import-update

Naming Convention Changes ​

CSS variable and data attributes names have been updated to use the reka prefix instead of radix.

  --radix-accordion-content-width: 300px;
  --reka-accordion-content-width: 300px;

  [data-radix-collection-item] {}
  [data-reka-collection-item] {}

npx codemod reka-ui/update-css-and-data-attributes

Component Breaking Changes ​

Combobox ​

• Remove filter-function props - Combobox has been refactored and improve to support better custom filtering. Read more.

  vue

  <template>
    <ComboboxRoot :filter-function="customFilter" />
  </template>

  Codemod available

  bash

  npx codemod reka-ui/update-combobox-filter

• Replace searchTerm props of Root to Input's v-model

• Move displayValue props from Root to Input

  vue

  <template>
    <ComboboxRoot v-model:searchTerm="search" :display-value="(v) => v.name" />
    <ComboboxRoot>
      <ComboboxInput v-model="search" :display-value="(v) => v.name" />
    </ComboboxRoot>
  </template>

Arrow ​

• Improve arrow polygon - Change the svg polygon to allow better styling.

Form component ​

• Rename controlled state to v-model - Replace v-model:checked, v-model:pressed with more familiar API for form component.

  vue

  <template>
    <CheckboxRoot v-model:checked="value" />
    <CheckboxRoot v-model="value" />
  </template>

  Codemod available

  bash

  npx codemod reka-ui/rename-controlled-state

• Reposition VisuallyHidden - Previously VisuallyHidden were position at the root node, causing style scoped to not be applied.

Pagination ​

• Required itemsPerPage prop - Instead of default itemsPerPage value, now it is required as to provide a more explicit hint about the page size.

  vue

  <template>
    <PaginationRoot :items-per-page="10" />
  </template>

Calendar ​

• Remove deprecated step prop - Use prevPage/nextPage props for greater control.

  vue

  <script setup lang="ts">
  function pagingFunc(date: DateValue, sign: -1 | 1) { 
    if (sign === -1) 
      return date.subtract({ years: 1 }) 
    return date.add({ years: 1 }) 
  } 
  </script>
  
  <template>
    <CalendarPrev step="year" />
    <CalendarPrev :prev-page="(date: DateValue) => pagingFunc(date, -1)" />
  
    <CalendarNext step="year" />
    <CalendarNext :next-page="(date: DateValue) => pagingFunc(date, 1)" />
  </template>

  Codemod available

  bash

  npx codemod reka-ui/remove-calendar-step-prop

Select ​

• SelectValue no longer render teleported element - Previous implmenentation of SelectValue will render the selected SelectItem via teleporting fragment. This causes SSR flickering, and it is unnecessarily computation.

  vue

  <template>
    <SelectValue>
      <!-- render the content similar to `SelectItem` -->
    </SelectValue>
  </template>