Introduction

Flx is UI blocks for your stack. Yours to customize, extend, and own. Copy the code, tweak props in the docs to see the result, then drop the block where you need it. No package to install—you own the source.

It's built on shadcn/ui and Tailwind so blocks look good together.

You can integrate easily with Sanity using the docs we provide, or with any other CMS by following the same props-based approach. If you're not using a CMS, you can pass data straight from your code.

• Copy-paste. You get the code. Take what you need and change it.
• Preview first. Change props in the docs and see the block update before you copy.
• Sanity & other CMS. Integrate via the Sanity docs we provide, or any CMS using the same props approach. If you're not using a CMS, pass data straight from your code.

Registry setup

To make sure the @flx registry is available, add this to your components.json:

"registries": {
  "@flx": {
    "url": "https://ui.flexnative.com/r/{name}.json"
  }
}

Then you can use the @flx registry in your project. For example, to add the cta block, you can run:

npx shadcn@latest add @flx/cta