Rasmus AabergFounder, BrandBuddyHaving the team by my side has been invaluable. From technical guidance to working through ideas, their expertise and feedback have made a real difference.
Arabic‑first blocks, components & templates
Direction is a property of every Fasla component. One React codebase, one Figma file, English and Arabic on launch day.
A Fasla product assembles from components, flips to Arabic with one property, switches to dark, adapts to desktop, tablet and mobile, then shows the blocks library and the CLI.
Cairo is a 1:1 twin of Geist.
Every step of the English ramp has an Arabic twin at the same size and weight. Only the line-height grows, so Arabic dots and ascenders have room to breathe.
GeistEnglishCairoArabic
text-5xl48 / 600 / 58text-5xl48 / 600 / 72
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-4xl36 / 600 / 44text-4xl36 / 600 / 60
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-2xl24 / 600 / 32text-2xl24 / 600 / 40
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-base16 / 400 / 24text-base16 / 400 / 28
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-sm14 / 400 / 20text-sm14 / 400 / 24
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
text-xs12 / 500 / 16text-xs12 / 500 / 20
Ship the Arabic release on launch day
أطلق النسخة العربية في يوم الإطلاق
Each row shares one baseline. Flip the page and the columns trade places; the type does not change.
What mirrors, what doesn't.
Fasla follows the rules Arabic readers expect. Pick a rule, or drag the line to compare English and Arabic.
Arrows and chevrons mirror. They point the way the reader moves.
3,527 atom variants, ready in Figma.
43 atoms, each a Figma component set with its sizes, states, light and dark themes, and both directions.
- Button960 variants, LTR and RTL
- Icon Button480 variants, LTR only
- Radio96 variants, LTR and RTL
- Switch144 variants, LTR and RTL
- Tooltip120 variants, LTR and RTL
- Alert30 variants, LTR and RTL
- Breadcrumb32 variants, LTR and RTL
- Pagination48 variants, LTR and RTL
- Badge432 variants, LTR and RTL
- Avatar72 variants, LTR and RTL
- Status Indicator8 variants, LTR only
- Rating48 variants, LTR and RTL
- Skeleton4 variants, LTR and RTL
- Separator1 variants, LTR only
- Checkbox60 variants, LTR and RTL
- Navbar34 variants, LTR and RTL
- Content Carousel6 variants, LTR and RTL
- Carousel18 variants, LTR and RTL
- Modal6 variants, LTR and RTL
- Input160 variants, LTR and RTL
- Alert Dialog8 variants, LTR and RTL
- Command Menu2 variants, LTR and RTL
- Table4 variants, LTR and RTL
- Drawer8 variants, LTR and RTL
- Textarea20 variants, LTR and RTL
- Progress126 variants, LTR and RTL
- Sidebar Item12 variants, LTR and RTL
- Slider42 variants, LTR and RTL
- OTP Input8 variants, LTR and RTL
- Calendar6 variants, LTR and RTL
- Date Picker48 variants, LTR and RTL
- Select192 variants, LTR and RTL
- Input Number100 variants, LTR and RTL
- Sonner2 variants, LTR and RTL
- Accordion16 variants, LTR and RTL
- Popover2 variants, LTR and RTL
- Timeline6 variants, LTR and RTL
- Dropdown Menu20 variants, LTR and RTL
- Context Menu4 variants, LTR and RTL
- Toggle96 variants, LTR and RTL
- Toggle Group16 variants, LTR and RTL
- Menubar2 variants, LTR and RTL
- Combobox28 variants, LTR and RTL
TypeScript. MIT core. Built on shadcn/ui primitives.npx @smicolon/fasla-ui@latest add button → components/ui/button.tsx
Blocks for every page, in both directions.
Copy a full-width section into your app. Every block ships in English and Arabic and mirrors to right-to-left on its own.
- 24 blocks
Hero
+2 New - 32 blocks
Features
- 14 blocks
Gallery
+3 New - 12 blocks
Banners
- 9 blocks
Authentication
- 11 blocks
Billing & payments
+1 New - 8 blocks
Checkout
- 6 blocks
Order summary
- 10 blocks
Dashboard
+2 New - 16 blocks
Product lists
- 7 blocks
Messages
- 6 blocks
AI assistant
+1 New - 9 blocks
FAQ
- 8 blocks
Error states
- 5 blocks
Date pickers
- 6 blocks
Notifications
+1 New
Templates, ready for launch day.
Complete bilingual sites built from Fasla blocks. Pick one, swap the content, and ship English and Arabic together.
Arabic, from the first commit.
Arabic is a launch language.
MENA teams ship both languages on day one, from the same components. No second design file, no mirrored rebuild after launch.
Storybook
Explore in Storybook(opens in a new tab)Same tokens on both sides.
The Figma component and the React component expose the same properties, bound to the same tokens. Change a property in the panel and the button and its JSX follow. Every component works this way in our Storybook.
ButtonFigma
Direction
Variant
Size
Live componentReact
- background
- --primary
- height
- 36px
- padding-inline
- 16px
- radius
- rounded-md
- font
- font-sans
// components/ui/button.tsx
<Button variant="default" size="default" dir="ltr">Continue {<ArrowRight />}</Button>
What you get
Everything a bilingual product needs on day one, in code you can read.
The Wall of Love
What people say about working with the team behind Fasla.
Rasmus AabergFounder, BrandBuddy
This project took many detours for me with how complex it was, and I'm grateful to them for helping me find a path forward to getting a framework in place! The team was easy to communicate with, and went out of their way to help me during the weekend when I was struggling. I would definitely recommend them to anyone else in the future. Thanks again!
5.0
Claudio KantnerFounder & CEO, PafindaThe team was crucial in shaping our MVP at Pafinda. Their expertise and strategic guidance balanced our ambitions, budget, and timeline, enhancing our overall understanding. I highly recommend the team for IT consultancy services.
5.0
Cons: They cost a lot. Pros: They do a good job. You get what you pay for. I don’t think Mohamed is capable of doing a bad job. After spending time with different developers on this site, it’s quite relieving to work with someone who outputs quality work up to industry standards. My only real gripe was that the team was somewhat lacking in knowledge on the implementation of the maps, but they didn’t charge for the learning curve. Overall, I’m happy with the site. It is what I envisioned and a bit more. I will be working with Mohamed in the future.
5.0
I want to highlight their team's exceptional spontaneity, flexibility, and rapid responsiveness
5.0
Fabulous team of people. The team listened to what we wanted, communicated well, and responded positively when we changed the design halfway through! I can thoroughly recommend Anders and his agency. We are very pleased with the work they have done for us.
5.0
I have used several different developers on Upwork, and I can genuinely say that Mohamed and his team have been the best! I highly recommend them, and I will absolutely use them again!
5.0
Zayad AbeyaCo-Founder, PiamotechI'm thrilled with the transformative journey with the team. They crafted our online identity, delivering a stunning website and functional admin dashboard. Their expertise and creativity were key, creating a digital solution that truly reflects who we are. We couldn't be happier and look forward to future collaborations.
5.0
Mahmoud DarweashAdvisor, 1UniPartnering with the team transformed our approach to higher education. They created an AI-powered platform that streamlined university selection and applications. Their Student Digital Body Language (SDBL) system revolutionized our understanding of student behavior. I highly recommend the team for their top-notch software solutions.
5.0
They showed strong dedication to ensuring the app was secure and met all data regulations
5.0
Anders and the team have been amazing to work with over the last year. They have integrity, commitment to the job, fantastic communication and they have delivered a great product at the end of the day. There were of course some challenges in our design and planning, but all projects have those. Many things I did not consider and some things that bit us along the way. Throughout that Anders was great at managing the project, he was clear about what was included and what was a new requirement that we were adding on. It was easy to understand what I was commiting to and what the budget was changing to. I could not fault them and for sure I will be working with them on an ongoing basis to continuiously develop the system we built.
5.0
Wowed by the team's work on our SaaS front-end review! Their expertise & communication were top-notch, and the impact on our platform will be massive. Quick wins & long-term improvement propositions - all actionable & delivered fast! ⚡️ The quality was outstanding for the time invested. Can't recommend them enough!
5.0
The team is a great example of a top-tier Dev agency. Excellent communication, and the SDD provided was crystal clear from day 1. Anders and Mohamed were available immediately for any questions, and the dev quality was enterprise level. My build was very complicated, and they completed the project easily. I would strongly recommend everyone to work with them.
5.0
They were determined to get the project right the first time.
5.0
Questions
Honest
questions.
Still have a question? Ask on GitHub
Fasla (فاصلة) is a bilingual design system and React component library by Smicolon. Every component ships in English and Arabic, left-to-right and right-to-left, light and dark.
Fasla is built on shadcn/ui primitives and keeps its copy-the-source model. The difference is direction: RTL and the Arabic type ramp are part of every component from the first commit.
No. An Arabic screen uses the same components as the English one with one property changed, Direction = RTL. Layout, icons and spacing mirror on their own.
Yes. The core is MIT licensed and free forever, for personal and commercial work. Pro is $149 and Team is $399, both one-time payments with lifetime access to the premium blocks, templates and the Figma file. See the plans.
Run init once, then add components one by one. The CLI copies each component's source into your repo, so you edit it like any file you wrote.
Yes. The Figma file is the source of truth and uses the same tokens as the code, so a designer's choice and a developer's build stay one decision.
Geist for English and Cairo for Arabic, on twin type ramps. Arabic copy uses Western numerals, and brand and technical terms stay in Latin script.
That's where it's heading. Each component is documented with clear content rules, so an agent can pick the right one and fill it without breaking the layout.
Free to start. Pay once for more.
The core is MIT for any project. Pro and Team add a commercial licence for premium blocks, templates and the Figma file.
Open source
$0free forever
For anyone starting with Fasla.
- Unlimited users and projects
- Commercial use under MIT
- All 29 components, LTR and RTL
- CLI that copies the source into your project
- Community support on GitHub
- Not included: Premium blocks and templates
- Not included: The Fasla Figma file
Pro
Best value$149one-time
For individual designers and developers.
- Single user access
- Unlimited commercial projects
- Everything in Open source
- All premium blocks and templates
- The Fasla Figma file, 3,527 variants
- Lifetime access and free updates
- Support within 48 business hours
Team
$399one-time
For growing product teams.
- Up to 10 seats
- Unlimited commercial projects
- Everything in Pro
- The Figma file for every seat
- Lifetime access and free updates
- Priority support within 24 business hours
One-time payment. Lifetime access. Unlimited projects.
$ npx @smicolon/
One command sets up your project. Add components as you need them, and keep every line.