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

[@APP-STUDIO/COMPONENTS](https://app-studio-6167b.web.app/docs/GettingStarted)

# React UI. Built to compose.

A TypeScript component library for React and React Native. Build consistent interfaces with shared themes, style props, and documented APIs.

[Start building](https://app-studio-6167b.web.app/components#get-started)[Explore components](https://app-studio-6167b.web.app/button)

 TypeScript first Source available Web + Native

 REAL COMPONENTS. GO AHEAD, TRY THEM.

COMPONENT PREVIEW

### Compose your next interface.

Controlled inputs. Typed callbacks. Shared styling.

Project name

A real TextField and Button. No mockup.

CONTROLLED COMPONENTS

### Inputs and controls.

**Stay in the loop**Only the updates that matter.

Include the good stuff

 All systems go⌘ KNew release

One component. Your style.

Preview

Code

Not a screenshot. Your future building blocks.[Explore Button](https://app-studio-6167b.web.app/button)

FAMILIAR TOOLS. A FRESH START. React React Native TypeScript[a. Powered by App Studio](https://app-studio-6167b.web.app/)

THE REPETITIVE PART? ALREADY DONE.

## Your ideas deserve more of your time.

Spend less time rebuilding the same controls. Start with a consistent foundation, then bring your own point of view.

### Compose. Don’t compromise.

From buttons and inputs to dialogs and navigation. Start small, combine freely, and keep control of the result.

[Meet the components](https://app-studio-6167b.web.app/docs/Button)

### Your brand belongs here.

Theme tokens, variants, and internal view overrides make a shared foundation feel like your own product.

[Explore the design system](https://app-studio-6167b.web.app/design-system)

### Details that make a difference.

Controls with labels, focus states, and keyboard interactions. Check each component’s examples for its supported behavior.

[Try an interactive control](https://app-studio-6167b.web.app/docs/Checkbox)

DIFFERENT SCREENS. SHARED FOUNDATIONS.

## One familiar API. More places to go.

Use the same imports and component patterns on web and React Native. Each platform gets a dedicated implementation.

- Shared theme tokens and styling conventions
- Platform-aware package exports
- Native compatibility documented per component

[Read the native compatibility guide](https://github.com/rize-network/app-studio-components/blob/main/docs/getting-started/react-native.md)

Some components are web-only. Native animations, icons, and gradients can require additional peers.

******your-next-app.dev

a.

A SHARED FOUNDATION

### Good morning, possibility.

Ready to build**Something great ↗**

**************

 REACT DOM

a.YOUR NEXT APP

### Same idea. New screen.

Made for here.

 REACT NATIVE

ILLUSTRATIVE LAYOUT · PLATFORM-SPECIFIC RENDERING

FIND YOUR BUILDING BLOCKS

## Small pieces. Whole experiences.

A library that grows with your interface, from the first input to the finishing touch.

[01 ### Actions & inputs Button, TextField, Checkbox, Switch](https://app-studio-6167b.web.app/button)[02 ### Structure & navigation Tabs, Sidebar, Accordion, NavigationMenu](https://app-studio-6167b.web.app/tabs)[03 ### Feedback & overlays Alert, Modal, Toast, Tooltip](https://app-studio-6167b.web.app/modal)[04 ### Content & data Card, Avatar, Badge, Table](https://app-studio-6167b.web.app/card)

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 component library uses App Studio for styling.

  `npm install @app-studio/components app-studio`

  [Check platform requirements and peer dependencies](https://app-studio-6167b.web.app/docs/installation)
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 } from 'app-studio';
import { Button, Text } from '@app-studio/components';

export default function App() {
  return (
    <ThemeProvider theme={{ primary: 'color-blue-900' }}>
      <ResponsiveProvider>
        <Vertical gap={16} padding={24}>
          <Text fontSize={24}>Hello, possibility.</Text>
          <Button onClick={() => console.log('Let’s go')}>
            Start something good
          </Button>
        </Vertical>
      </ResponsiveProvider>
    </ThemeProvider>
  );
}
```

 Ready for your React project[Full setup guide](https://app-studio-6167b.web.app/docs/installation)

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 ### Your first component Installation, providers, peer dependencies, and a working example. Open the guide](https://app-studio-6167b.web.app/docs/installation)[02 / GUIDE ### Explore the components Props, variants, and interactive examples. Find your next building block. Open the guide](https://app-studio-6167b.web.app/docs/Button)[03 / GUIDE ### Understand the engine See how App Studio handles styling, themes, and responsive layouts. Open the guide](https://app-studio-6167b.web.app/)

GOOD QUESTIONS

## A few things to know.

Which package should I start with?

Choose @app-studio/components for ready-made UI and install app-studio alongside it. Choose app-studio alone when you want to build your own components from layout and styling primitives.

Can I make the components match my brand?

Yes. Use ThemeProvider for shared color tokens, component props for variants and sizes, and the views prop to style internal parts. Start with one component before creating a shared design system.

What does React Native support include?

The library ships dedicated native implementations with a shared public API. Availability and behavior depend on the component; some controls are web-only and some native features need optional peers. The setup guide links to the compatibility matrix.

Where can I check the source and license?

Both repositories are public on GitHub. Review the LICENSE file included with the version you adopt. The component repository currently has conflicting license information between its README and LICENSE; confirm the terms before commercial use.

 YOUR NEXT PROJECT STARTS HERE

## Make your next interface a great one.

[Start building](https://app-studio-6167b.web.app/components#get-started)[Read the documentation](https://app-studio-6167b.web.app/docs/installation)