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.

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>

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] {} 

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>

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

• Move displayValue props from Root to Input

  vue

  <template>
    <ComboboxRoot v-model:search-term="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>

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

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>