Native Animation / BaseFree forever. MIT.

Native Animation Base

Connect the MCP.
Build the whole app.

A free React Native UI library for your next Expo app.
Modern screens. Curated motion. One coherent theme.

Free forever. MIT. Your app. Your source.

Connect the MCP Browse components

MITNo account requiredStyleSheetLight and dark

componentsOne shared themeYours to shape

Terminal

Run in your project’s terminal.

$ claude mcp add nativeanimation -- npx -y nativeanimation@latest mcpclaude mcp add nativeanimation -- npx -y nativeanimation@latest mcp

One connection. The whole Native Animation catalog.
Base needs no account. Requires Node.js 20 or later.

“Build a habit tracker app with Native Animation Base…”
Three screens. A shared theme. Every detail connected.

Interactive web preview

9:41••• ▰

MONDAY, OCTOBER 26

A little better,
every day.

Today’s momentum / 3

Small steps. Real progress.

Your habitsDaily

9:41••• ▰

KEEP SHOWING UP

Your progress.

Habits completed ↗

Every little win adds up.

7 days of showing upKeep your rhythm going.

A week to feel good about

You’re building something that lasts. One day at a time.

9:41••• ▰

MAKE IT YOURS

Your space.

JJamie MillerA little more intentional.

Preferences

Daily remindersA moment for yourself

Appearance

Next habit

A fresh start, every morning.

TodayProgressSettings

Base AccordionReal component. Native motion.

Base AlertReal component. Native motion.

Base Animated IconReal component. Native motion.

An interactive web illustration of a Base app. Change the theme. Try a habit. Make it yours.

How it works

From a thought
to something you can tap.

Build with an agent

01 /

Connect your agent

Add the Native Animation MCP to your project. Your agent gets the design guide, component docs, and source in one place.

02 /

Describe your app

Tell it what you’re making, the screens you need, and the feeling you want. Start with the example prompt or write your own.

03 /

Make it feel like one app

Your agent sets up a shared theme, composes screens, and connects navigation and state. Then refine the details together.

A system, down to the details

One theme.
Every screen.

Buttons, fields, tabs, and feedback share semantic colors, spacing, and motion. Switch the accent above. The whole app follows.

Make it your theme

theme.tslightdark / quill

import { createBaseTheme } from '@/components/base-theme';

const theme = createBaseTheme({
  scheme: 'light',
  accent: 'quill',
});import { createBaseTheme } from '@/components/base-theme';

const theme = createBaseTheme({
  scheme: 'dark',
  accent: 'quill',
});

The everyday, considered

Small pieces.
Complete possibilities.

Buttons, text inputs, overlays, and feedback with editable TypeScript source. Use the CLI, connect your agent, or download the source. Start with the Base installation guide.

Browse components

Actions & inputs · MIT

Base Accordion

Measured disclosure rows that open smoothly without guessing their content height.

Feedback · MIT

Base Alert

An inline alert with an animated entrance and collapsing dismissal, configurable tone, icon, title, description, action, and theme.

Text & motion · MIT

Base Animated Icon

Animated stroke icons that ring, draw, and turn, with configurable icon, size, color, and stroke width.

Actions & inputs · MIT

Base Avatar

An avatar and overlapping group with press feedback and configurable images, initials, size, and theme.

Feedback · MIT

Base Badge

A status badge with a sliding count and configurable content, leading icon, count, and theme.

Actions & inputs · MIT

Base Button

A button with spring-driven press feedback and configurable content, size, variant, and theme.

Start with a screen.

Connected layouts for the tasks every app needs. Explore the published screen blocks or use the example app brief to build your own.

Explore blocks

Screen composition ↗

Sign in

A calm entry point with clear fields and thoughtful feedback.

Screen composition ↗

Settings

Preferences that feel at home in the rest of your app.

Screen composition ↗

List & detail

Browse, select, and move through content with continuity.

Prefer the terminal?

Add one component and its family dependencies. No account required.

Installation guide

npx nativeanimation add base-button

Or download the source from a published component’s page and follow its README.

Go further.

Base covers the everyday. Choose a more expressive interaction when your app calls for it.

Premium animation · $9

OTP Code Input ↗

A passcode field with animated slots and validation feedback, with configurable code length, slot size, accent color, and font.

Premium animation · $9

Swipe to Delete Row ↗

A swipe-action row with expanding actions and collapse dismissal, with configurable row content, action labels, delete color, and font.

Premium animation · $9

Snap Sheet Backdrop ↗

A map-linked bottom sheet with three snap points and a receding backdrop, with configurable locations, photos, accent colors, and fonts.

A few things to know.

What is Native Animation Base?

A family of animated React Native components inside Native Animation. Your agent can compose everyday screens using a shared theme, documented props, and editable source.

Is Base free forever?

Yes. Base components and the Base theme are free forever under the MIT license. No account, email, or card is required. Other Native Animation pieces have their own prices and licenses.

What can I do with the source?

Use it in personal and commercial apps, change it, and redistribute it under MIT. Keep the included copyright notices and license with your copies.

Do I need an agent?

No. The CLI and manual source downloads are available too. An MCP connection simply lets your coding agent find components, read their real APIs, and compose a consistent app.

Does Base include a styling engine?

Base uses React Native StyleSheet and a local, shared theme. Customize semantic colors, fonts, and component props in your own project.

Which Expo SDK does it support?

Use the compatibility table on each published component. The CLI selects a release for your project’s SDK and installs missing packages with Expo. Each published piece is reviewed on physical iPhone and Android devices with Expo Go before release.

Choosing between a UI kit and editable source? Compare installation formats.

A FOUNDATION YOU CAN MAKE YOUR OWN

Let’s build your next app.

Connect the MCP Read the docs