Installation

Set your project up once, then add a block with one command.

Run init first

Run init once per project, before the first block. It writes components.json, which every add reads, adds the cn helper the blocks import, and installs the theme.

bash
npx @smicolon/fasla-ui@latest init

The theme layers and setting up a project by hand: see Installation in the Components section.

Install a block

add writes the block to components/blocks/. It also installs the components the block uses, such as accordion or tabs, and the packages they import. You don’t add them one by one.

bash
npx @smicolon/fasla-ui@latest add faq-classic-centered

The shadcn CLI installs a block the same way, from its registry URL, with npx shadcn@latest add:

npx shadcn@latest add https://fasla.smicolon.com/r/faq-classic-centered.json

CSS for blocks on an inverted surface

Both add commands also add the inverse tokens’ mapping that a block on an inverted surface needs. Installing one by hand on Tailwind 4, add these three lines to your stylesheet’s @theme inline block:

css
--color-background-inverse: var(--background-inverse, var(--foreground));
--color-foreground-inverse: var(--foreground-inverse, var(--background));
--color-muted-foreground-inverse: var(--muted-foreground-inverse, color-mix(in oklab, var(--background) 75%, var(--foreground)));

On Tailwind 3, the fallbacks, and setting your own colours: see Inverse tokens.