Source: https://app-studio-6167b.web.app/

[APP-STUDIO / STYLING FRAMEWORK](https://app-studio-6167b.web.app/docs/AppStudio)

# 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](https://app-studio-6167b.web.app/#get-started)[Read the docs](https://app-studio-6167b.web.app/docs/AppStudio)

 Typed style props Web + Native MIT licensed

```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](https://app-studio-6167b.web.app/docs/AppStudio)

### 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](https://app-studio-6167b.web.app/docs/AppStudio)

### 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](https://app-studio-6167b.web.app/docs/AppStudio)

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](https://app-studio-6167b.web.app/components)

[02 / THE BUILDING BLOCKS ### @app-studio/components Buttons, inputs, dialogs, navigation, and more.](https://app-studio-6167b.web.app/components)[01 / THE FOUNDATION ### app-studio Layout primitives · style props · tokens · motion](https://app-studio-6167b.web.app/docs/AppStudio)

 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](https://app-studio-6167b.web.app/docs/core)
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.

```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 project[Full setup guide](https://app-studio-6167b.web.app/docs/core)

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](https://app-studio-6167b.web.app/docs/core)[02 / GUIDE ### Go deeper into the API Styling states, animations, hooks, providers, and composition. Open the guide](https://github.com/rize-network/app-studio/blob/main/docs/README.md)[03 / GUIDE ### Take it to native Native mappings, optional peers, and the web APIs that differ. Open the guide](https://github.com/rize-network/app-studio/blob/main/docs/Native.md)

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](https://app-studio-6167b.web.app/#get-started)[Read the documentation](https://app-studio-6167b.web.app/docs/core)