Skip to content
app studio/components
@APP-STUDIO/COMPONENTS

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 Explore components
TypeScript first Source available Web + Native
REAL COMPONENTS. GO AHEAD, TRY THEM.
COMPONENT PREVIEW

Compose your
next interface.

Controlled inputs. Typed callbacks. Shared styling.

A real TextField and Button. No mockup.
CONTROLLED COMPONENTS

Inputs and controls.

Stay in the loopOnly the updates that matter.
All systems go⌘ KNew release
One component. Your style.
Not a screenshot. Your future building blocks.Explore Button
FAMILIAR TOOLS. A FRESH START. React React Native TypeScript Powered by App Studio
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

Your brand belongs here.

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

Explore the 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
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

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 buildSomething 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

02

Structure & navigation

Tabs, Sidebar, Accordion, NavigationMenu

03

Feedback & overlays

Alert, Modal, Toast, Tooltip

04

Content & data

Card, Avatar, Badge, Table

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
  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 } 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 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

Your first component

Installation, providers, peer dependencies, and a working example.

Open the guide 02 / GUIDE

Explore the components

Props, variants, and interactive examples. Find your next building block.

Open the guide 03 / GUIDE

Understand the engine

See how App Studio handles styling, themes, and responsive layouts.

Open the guide
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 Read the documentation