RTL Support

Hi UI Bakery Team,

I’m building an app with Arabic content and noticed that UI Bakery doesn’t currently support RTL (Right-to-Left) layout. I tried applying custom code:

<style>
  nb-layout .layout {
    direction: rtl;
    text-align: right;
  }
</style>

While this changes the text direction, it unfortunately breaks several UI elements — including table headers, form fields, select inputs, lists, and margins. Many components remain aligned as LTR, causing layout issues.

Native RTL support or a layout toggle would be highly valuable for Arabic and other RTL languages.

Is this planned on the roadmap? Would appreciate any guidance or workarounds in the meantime.
Because here’s the look when i applied the custom css code

It Destroy the Beauty of UI Bakery.!!

Thanks and waiting for your feedback
Regards
Motaz

Hi @MotazHakim

Welcome to our Community!

I’m afraid the request for RTL among our clients is very low. We are currently focusing on more priority tasks, so RTL is not on our roadmap at the moment. Feel free to create a feature request on our roadmap, and we’ll see how the voting goes.

Thanks!

Thanks @Kate for your reply

So do you think you can help me fixing the issues you see on the screenshot i’ve attached before via custom code CSS ? like tables / forms / inputs

Hi @MotazHakim

I’ll see if there is anything we can do here

1 Like

Thanks alot @Kate

to help i’ve made like a compare between what it should look like in RTL
for tables / forms / all other components

the label with a red line means it needs to change that language or we might leave it as it is,
for example
in english : 7 items
in arabic : 7 عناصر
again we can leave it as it is,

i really wish you can do something here with the screenshots attached or telling me a custom code to use to accomplish that

and i’m ready to help showing you anything on how it look in RTL or translations

Thanks
Regards