Introduction

A personal component registry in the shadcn/ui format: 71 components, 2 blocks and 21 themes, built on react-aria-components.

This is not a package you install from npm. Like shadcn/ui, the code is copied into your project by the shadcn CLI, and from then on it is yours. Everything lands in fma-ui folders (components/fma-ui/, hooks/fma-ui/, lib/fma-ui/), so it never collides with the official shadcn components.

Installation

Start from a project set up for shadcn/ui (Tailwind v4, a components.json). Then register the @fma-ui namespace:

{
  "registries": {
    "@fma-ui": "https://ui.fmartinsandre.dev.br/r/{name}.json"
  }
}

And add any component or block by name:

pnpm dlx shadcn@latest add @fma-ui/button

Dependencies between items resolve through the same namespace, so adding a block pulls the components it is built from.

Built on React Aria

Interaction, focus management and accessibility come from react-aria-components, so the APIs follow React Aria rather than Radix: isDisabled instead of disabled, onPress instead of onClick, and no asChild (use LinkButton for a link that looks like a button). Wrap your app in React Aria's RouterProvider so links navigate client-side.

Themes

Every color, radius, font and shadow is a CSS variable. Pick one of the curated themes, tweak it in the theme editor and export it as CSS, or install it straight from the registry with @fma-ui/theme-<name>.

Storybook

Every component has stories with interaction tests; the examples on these pages are those same stories. Storybook also documents props and shows the accessibility checks.