Introduction

What a block is

A block is one file that composes Fasla components, such as Accordion, Tabs and Button, into a section of a page. It takes every colour from your theme tokens. Once it is in your project, the code is yours to change.

• It is responsive: each block is designed at desktop, tablet and mobile widths, and changes layout at the md and lg breakpoints.
• It follows the page’s direction. Every side is a logical one, so the same code lays out left to right in English and right to left in Arabic.
• Its content comes from props. Each block ships with English and Arabic copy; locale picks which, and any prop you pass replaces it.

Images

Blocks don’t include images. A block with a photo shows a placeholder, and one with people shows their initials, until you pass your own: image takes a src and an alt, and each person takes a src.

Blocks on an inverted surface

A few blocks sit on an inverted surface: dark in light mode, light in dark mode. They are painted with the inverse tokens, so they never force a dark class on a section. Installing one with npx @smicolon/fasla-ui@latest add or npx shadcn@latest add also adds the tokens’ mapping to your stylesheet.

Installing one by hand takes three lines of CSS: see Installation.

Block families

• FAQ: Twenty-six FAQ sections, from a centred accordion to search, topic tabs and a support chat, responsive and mirrored for Arabic.