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.
or
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.
42 components, free and open source.
The UI primitives and motion effects in the open-source package, each in English and Arabic, in both directions, light and dark.
- Accordion
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Checkbox
- Combobox
- Content Carousel
- Date Picker
- Dialog
- Dropdown Menu
- Fasla Logo
- Input
- Input Number
- OTP Input
- Pagination
- Progress
- Radio
- Select
- Sheet
- Sidebar
- Skeleton
- Slider
- Social Icons
- Status Indicator
- Steps
- Switch
- Tabs
- Textarea
- Tooltip
- Animated GradientEffect
- Border BeamEffect
- Glow CardEffect
- Shimmer ButtonEffect
- SpotlightEffect
- Text RevealEffect
- Typewriter TextEffect
TypeScript. MIT core. Built on shadcn/ui primitives.npx @smicolon/fasla-ui@latest add button → components/ui/button.tsx
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 €349, 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 42 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
- Lifetime access and free updates
- Support within 48 business hours
Team
€349one-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.
Or let your agent do it
Paste this prompt into your AI coding agent to set up Fasla.
Set up Fasla in this project. Fasla is an Arabic-first, RTL-ready React component library built on shadcn/ui and Tailwind CSS (docs: https://fasla.smicolon.com). 1. Check that this is a React (18 or 19) and Tailwind CSS (3.4 or 4) project, such as Next.js or Vite, and tell me what you find. 2. Ask me which theme I want: "fasla" (Fasla's own colours, for a project without colours of its own) or "brand" (keep my project's colours). Then initialize without prompts: run `npx @smicolon/fasla-ui@latest init --yes --path src/components --style default --theme <my choice>` (use `--path components` if the project has no src folder; `--path` is the components folder and the CLI adds `ui` itself). Never wait for interactive prompts. If you get an error that lists flags, add them and run again: nothing is written on that error. Then read the "What init did" list and tell me what changed. 3. Run `npx @smicolon/fasla-ui@latest list`, then add the components I ask for, for example `npx @smicolon/fasla-ui@latest add button --yes`, and import them from the path the CLI prints. 4. Fasla copies component source into my project, so I can edit the files freely. 5. Use CSS logical properties (margin-inline-start, not margin-left) and keep both LTR and RTL working. Set dir="rtl" on the root for Arabic pages. 6. Do not change my existing components unless I ask, and show me your plan before you install anything. Ask me which components I want first.