Hello from inside the Dialog!
Hello from inside the Dialog!
Hello from inside the Dialog!
…
…
```
## Common Use Cases
1. **Custom Styling**: Access internal state to apply dynamic styles based on component state.
2. **Extended Functionality**: Build upon existing component logic to add new features.
3. **Complex Layouts**: Create intricate UI patterns by composing multiple components and sharing state between them.
4. **Accessibility Enhancements**: Utilize internal methods and state to improve keyboard navigation or screen reader support.
## Best Practices
1. Use `injectContext` in child components or composables, not in the component itself.
2. Always check if the injected context exists before using it, as it may be `undefined` if used outside the component's scope.
3. Prefer using provided props and events when possible, and use `injectContext` for more advanced scenarios.
4. When using TypeScript, leverage the type information provided by `injectContext` for better code quality.
---
---
url: /docs/overview/installation.md
---
# Installation
A quick tutorial to walk through installing the packages, as well as the supported plugins.
## Installing the package
## Nuxt modules
Reka UI offers Nuxt modules support.
In `nuxt.config.ts`, simply add `reka-ui/nuxt` into the modules, and it will auto-imports all the components for you.
```ts
export default defineNuxtConfig({
modules: ['reka-ui/nuxt'],
})
```
## unplugin-vue-components
Reka UI also has resolver for the popular [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
In `vite.config.ts`, import `reka-ui/resolver`, and configure as such and it will auto-imports all the components from Reka UI.
```ts{2,10 }
import Components from 'unplugin-vue-components/vite'
import RekaResolver from 'reka-ui/resolver'
export default defineConfig({
plugins: [
vue(),
Components({
dts: true,
resolvers: [
RekaResolver()
// RekaResolver({
// prefix: '' // use the prefix option to add Prefix to the imported components
// })
],
}),
],
})
```
---
---
url: /docs/guides/i18n.md
description: >-
Reka UI support both LTR/RTL directions. Learn more about how to integrate
internationalization.
---
# Internationalization & RTL
## Multi-Direction Support
### Introduction
This documentation provides guidance on how to utilize multi-directional support in Reka UI with SSR support. Reka UI rely on [`Floating UI`](https://floating-ui.com/) to position floating elements, which requires to be fed the current direction of the web app.
Reka components are LTR by default, but you are in control of what direction (only LTR, RTL, or both) you want to support. This section provides best practices to easily support RTL direction.
### RTL
[`ConfigProvider`](/docs/utilities/config-provider) is a wrapper component to provide global configurations, including the directionality of the web app.
When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the `ConfigProvider` component to ensure all of the primitives adjust their behavior based on the `dir` prop.
To make all Reka UI RTL, wrap your entire App in `ConfigProvider` and pass the `dir` prop with the value `rtl`.
Add the following code to your `app.vue` or main layout component:
```vue
👋 {{ $t("hello") }}
HTML is in {{ dir }} mode
Row as anchor Trigger
This content will always be rendered
This content is hidden