Skip to content
app studio/core
APP-STUDIO / STYLING FRAMEWORK

Your styles.
Your components.
One API.

Style React with the props you already understand. Layout, themes, responsive design, and motion — together in your component.

Get started Read the docs
Typed style props Web + Native MIT licensed
YourComponent.tsx
<Vertical
  padding={24} gap={12}
  borderRadius={16}
  backgroundColor="color-white"
  animate={Animation.fadeIn()}
>
  <Text color="color-blue-900">Make it yours.</Text>
</Vertical>
LIVE PREVIEW

Make it yours.

Typed styles, rendered live.
YOUR PALETTE
PROPS → PIXELS
ONE CONNECTED STYLING SYSTEM Style props Theme tokens Responsive Animation
CLOSE TO YOUR COMPONENT. OUT OF YOUR WAY.

Less context switching. More clarity.

Read the structure and the styling in the same place. A View for your layout. Tokens for your colors. Props for the details.

CSS you already know.

Use padding, gap, borderRadius, and other typed style props directly. Compose layouts with View, Horizontal, and Vertical.

See it in the guide

Tokens that connect the dots.

Define your theme once. Use theme-primary and color tokens throughout your interface, with light and dark palettes.

See it in the guide

Made to respond and move.

Adapt layouts with the media prop. Add Animation presets on web, and use Reanimated for supported native motion.

See it in the guide
TWO PACKAGES. CLEAR ROLES.

Start at the layer
that works for you.

App Studio gives you the primitives. The component library builds on them. Use either starting point without learning a second styling language.

Discover the component library
02 / THE BUILDING BLOCKS

@app-studio/components

Buttons, inputs, dialogs, navigation, and more.

01 / THE FOUNDATION

app-studio

Layout primitives · style props · tokens · motion

React DOM React Native
FROM IDEA TO FIRST RENDER

Install. Configure.
Build.

Start with your existing React project. Add the package, wrap your app, and make it yours.

  1. 01

    Install your foundation

    The styling engine works on its own.

    npm install app-studio
    Check platform requirements and peer dependencies
  2. 02

    Set up your providers

    ThemeProvider resolves your color tokens. ResponsiveProvider enables device-aware layouts.

  3. 03

    Build something that feels like you

    Use typed props and your own theme. Keep your existing React tools.

App.tsx
import { ThemeProvider, ResponsiveProvider,
  Vertical, Text, Animation } from 'app-studio';

export default function App() {
  return (
    <ThemeProvider theme={{ primary: 'color-blue-900' }}>
      <ResponsiveProvider>
        <Vertical
          gap={16}
          padding={32}
          media={{ mobile: { padding: 16 } }}
          animate={Animation.fadeIn()}
        >
          <Text color="theme-primary" fontSize={28}>
            Make room for your ideas.
          </Text>
        </Vertical>
      </ResponsiveProvider>
    </ThemeProvider>
  );
}
Ready for your React projectFull setup guide
A LITTLE GUIDANCE GOES A LONG WAY

Built for the way developers learn.

Start with a working example. Understand the decisions. Go deeper when you need to.

01 / GUIDE

Understand the foundations

Style props, theme tokens, responsive layouts, and your first component.

Open the guide 02 / GUIDE

Go deeper into the API

Styling states, animations, hooks, providers, and composition.

Open the guide 03 / GUIDE

Take it to native

Native mappings, optional peers, and the web APIs that differ.

Open the guide
GOOD QUESTIONS

A few things to know.

How is App Studio different from the component library?

App Studio is the foundation: layout primitives, style props, tokens, hooks, and animations. @app-studio/components adds ready-made controls such as buttons, dialogs, and forms. Use the engine alone or use both together.

Do I have to replace my existing styling?

No. Start with a View or a layout in one part of your React app. App Studio can sit alongside your existing components and styles. Theme tokens need ThemeProvider; responsive device names need ResponsiveProvider.

Does exactly the same code work on web and native?

The package selects a dedicated build for each platform and shares its styling API. Native uses a supported subset: browser selectors and CSS Grid do not map one-to-one. Check the native guide before sharing a screen.

Can I use it in a commercial project?

Yes. App Studio is open source under the MIT license. You can inspect the implementation, adapt it, and use it in commercial applications.

YOUR NEXT PROJECT STARTS HERE

Your ideas.
A better foundation.

Start building Read the documentation