Why Flexnative

Flexnative follows the shadcn/ui approach: instead of adding a dependency, you add the source to your project.

• You own the code. Every item lands in your project as plain React. Change anything.
• Only shadcn/ui underneath. Everything uses shadcn/ui components, Tailwind CSS and lucide-react icons. Nothing else to learn.
• Themes and dark mode. Colors come from your theme tokens, so everything matches the rest of your app.
• Motion built in. Animations use Motion, with support for reduced motion.
• Works with AI agents. Point Claude Code, Cursor or Codex to llms.txt and the @flx registry.

Quick start

Flexnative is listed in the shadcn registry directory as @flx. In a project with shadcn/ui set up:

npx shadcn@latest add @flx/feature-01

Swap feature-01 for any block, pattern or illustration name shown on the website. Prefer not to use the CLI? Every page has the source to copy by hand.

Using Claude Code, Cursor or Codex? Point your agent to llms.txt.

Blocks are plain components with their content inline, so you can use one right away and edit the text, images and links in the file:

import { Feature01 } from '@/components/flx/blocks/feature/feature-01'

export default function Page() {
  return <Feature01 />
}

What's inside

Blocks

Full page sections for landing pages and marketing sites.

Category
Hero	The first section of a landing page
Feature	Explain product capabilities
Content	Present information in an organized way
Call to Action	Drive visitors toward a next step
Testimonials	Social proof from customers
Bento grids	A primary tile with supporting cards
Lists	Rows of projects, roles or articles, and labelled details

More categories are on the way.

Patterns

Ready-made variations of shadcn/ui components for everyday UI, across 23 categories: accordion, avatar, badge, banner, breadcrumb, button, card, checkbox, collapsible, command, dialog, dropdown, empty, input, item, pagination, popover, select, skeleton, switch, table, tabs and tooltip. Browse patterns.

Forms come in two flavors: React Hook Form and TanStack Form.

Illustrations

UI illustrations built with shadcn/ui and Motion, ready to drop into blocks, empty states and marketing pages.

• Spot: small, elegant UI elements such as metrics, notifications and charts.
• Scene: large, layered illustrations for hero and marketing sections.

Browse illustrations.

Requirements

• A project with shadcn/ui set up, using the Base UI style
• React 19 and Tailwind CSS 4
• The shadcn CLI to install items, or nothing at all if you copy them by hand

FAQ

Is it free? Yes. Everything in registry/ is MIT, so you can use it in any project, commercial or not.

Does it work with my design? Yes. Everything reads your shadcn/ui theme tokens, so changing your theme changes them too.

Development

This repo powers ui.flexnative.com and hosts the @flx registry.

pnpm install
pnpm dev
pnpm registry:build

Source lives in registry/, and pnpm registry:build generates the installable files in public/r. See CONTRIBUTING.md for the rules every item follows.

Credits

Inspired by shadcn/ui. Built by Felipe Menezes.

If Flexnative saves you time, a star helps other developers find it.

License

The blocks, patterns, forms, illustrations and presets in registry/ are licensed under the MIT license. Use them in any project, commercial or not.

Everything else in this repository, including the website, is licensed under the AGPL-3.0 license.