Every screen Claude Code generates is built from components. The library it uses lives in DESIGN.md. Switch it any time with a prompt.

​
Supported libraries

LibraryPackageInstall
Prototo (default)built-innone
Tamagui@tamagui/coreauto
Gluestack UI@gluestack-ui/themedauto
React Native Paperreact-native-paperauto
NativeWindnativewindauto
Customyour packageone command
For the four known libraries, proto design runs the install silently when you pick one. For Custom, you enter the package name and Proto handles the rest.

​
Prototo built-in components

These are always available as a fallback, even when another library is selected:
ComponentWhat it does
ScreenBase wrapper with safe area and optional scroll
StackVertical layout with gap and padding
RowHorizontal layout with gap and alignment
TextTypography — title, headline, body, caption, label
CardSurface container, optional Liquid Glass
ButtonPrimary, secondary, ghost, destructive
ToggleThemeable switch
ModalBottom sheet
DividerSeparator
Bottom navigation uses Apple’s native tab bar directly (via expo-router) rather than a Proto component — same reason Proto doesn’t ship its own Switch. Don’t rebuild what Apple already ships.

​
Using your team’s component library

If your production app uses Tamagui, Gluestack, React Native Paper, NativeWind, or a custom internal library — you can prototype with the exact same components your engineers use. Run proto design and pick your library. Or tell Claude Code: 
update DESIGN.md — switch the component library to Tamagui.
Package is @tamagui/core, import from @tamagui/core.
Then regenerate the Home screen using Tamagui components.
Proto installs the package. Claude Code rewrites screens with the new imports. The Simulator updates.

​
Custom or proprietary libraries

For a library Claude Code may not know well, add 2–3 component examples to DESIGN.md: 
## Examples

// Primary button
import { Button } from '@acme/mobile-components';
<Button variant="primary" onPress={handler}>Label</Button>

// Card surface
import { Surface } from '@acme/mobile-components';
<Surface elevated padding="md">content</Surface>
Claude Code reads these and follows the exact API pattern when generating screens. Two or three examples cover most libraries — Claude extrapolates the rest.

​
The fallback rule

If the specified library doesn’t have a component that covers a need (for example, Tamagui has no drop-in safe-area wrapper), Claude Code falls back to a Prototo primitive silently. You never see this. Screens just work.

​
Why this matters at handoff

When you prototype using your team’s actual production library, the screens Claude Code generates aren’t throwaway prototypes — they are close to production code. An engineer opens a screen, sees familiar imports and patterns, and can move it directly into the production codebase with minimal rework. The gap between prototype and production collapses from weeks to hours.