# App Studio

> App Studio is a TypeScript styling framework for React and React Native. The separate @app-studio/components package adds ready-made UI controls built on the framework.

The homepage presents app-studio; /components presents the component library. Install app-studio alone for custom components, or install both packages for ready-made controls. Import paths, required props, literal defaults, and working examples are documented in each reference. React Native support varies by component. Check the installation and native guides for peers and platform limitations.

These Markdown pages are generated from the same HTML as the public documentation. Each page identifies its canonical source URL. Fetch the relevant page rather than loading the entire export. The framework and component library have separate licenses; consult the LICENSE included with the version you adopt.

## Framework and component library

- [App Studio — Your styles. Your components. One API.](https://app-studio-6167b.web.app/index.md): Build React and React Native interfaces with typed style props, responsive layouts, theme tokens, and animations. Discover the App Studio styling engine.
- [App Studio Components — React UI for web and native](https://app-studio-6167b.web.app/components.md): Composable React and React Native components, TypeScript APIs, theme tokens, and practical documentation. Build your next interface with App Studio Components.

## Guides and installation

- [Introduction](https://app-studio-6167b.web.app/docs.md): Understand the two packages and choose your starting point.
- [Installation](https://app-studio-6167b.web.app/docs/installation.md): Install the packages, check peer dependencies, and configure your app.
- [Quick start](https://app-studio-6167b.web.app/docs/quick-start.md): Build a working interface with providers and controlled components.
- [React Native](https://app-studio-6167b.web.app/docs/react-native.md): Set up native builds and understand platform differences.
- [App Studio foundations](https://app-studio-6167b.web.app/docs/core.md): Learn layout primitives, style props, and how the packages fit together.
- [Styling & composition](https://app-studio-6167b.web.app/docs/styling.md): Style components, choose variants, and customize internal views.
- [Providers](https://app-studio-6167b.web.app/docs/providers.md): Configure shared theme and responsive contexts, with optional providers when needed.
- [Colors & theming](https://app-studio-6167b.web.app/docs/theming.md): Connect your brand, semantic tokens, and light and dark palettes.
- [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive.md): Adapt your layout with media props and responsive providers.
- [Animation](https://app-studio-6167b.web.app/docs/animation.md): Add motion and respect reduced-motion preferences.
- [Hooks](https://app-studio-6167b.web.app/docs/hooks.md): Read theme, responsive, hover, and window state from React components.
- [Forms & validation](https://app-studio-6167b.web.app/docs/forms.md): Control field values and connect Formik with explicit validation.
- [Accessibility](https://app-studio-6167b.web.app/docs/accessibility.md): Build labeled, keyboard-friendly interfaces and test real interactions.
- [AI & coding assistants](https://app-studio-6167b.web.app/docs/ai-assistants.md): Use the Markdown documentation, API references, and source examples with your coding assistant.
- [Troubleshooting](https://app-studio-6167b.web.app/docs/troubleshooting.md): Resolve missing colors, peer dependency errors, and platform issues.
- [Component library](https://app-studio-6167b.web.app/docs/components.md): Browse React and React Native components by category. Explore typed props, working examples, live playgrounds, and code you can copy into your project.

## Component API references

- [AspectRatio props, examples & playground](https://app-studio-6167b.web.app/docs/AspectRatio.md): This component ensures its content maintains a specified aspect ratio, adjusting its size responsively while preserving visual proportions.
- [Background props, examples & playground](https://app-studio-6167b.web.app/docs/Background.md): A comprehensive collection of background effects, including animated particles, gradients, images, and videos.
- [Card props, examples & playground](https://app-studio-6167b.web.app/docs/Card.md): A versatile card component for displaying content in a contained, styled box with support for headers, content, and footers.
- [Drawer props, examples & playground](https://app-studio-6167b.web.app/docs/Drawer.md): A slide-out panel component that appears from the edge of the screen, with support for different placements, sizes, and content sections.
- [PageLayout props, examples & playground](https://app-studio-6167b.web.app/docs/PageLayout.md): Compose an application screen with structured header, content, and footer regions.
- [KeyboardAvoidingView props, examples & playground](https://app-studio-6167b.web.app/docs/KeyboardAvoidingView.md): Keep form content usable when the on-screen keyboard appears. Browser previews illustrate layout; native keyboard behavior depends on the target platform.
- [SplashScreen props, examples & playground](https://app-studio-6167b.web.app/docs/SplashScreen.md): Display an application loading or startup screen with configurable content and presentation.
- [Router props, examples & playground](https://app-studio-6167b.web.app/docs/Router.md): Render a route from the shared history store. Navigate between screens and optionally synchronize the browser address bar.
- [HoverCard props, examples & playground](https://app-studio-6167b.web.app/docs/HoverCard.md): Displays rich content on hover, with customizable trigger and content presentation.
- [Modal props, examples & playground](https://app-studio-6167b.web.app/docs/Modal.md): A custom content overlay that appears on top of the main screen, with support for headers, bodies, footers, and flexible positioning.
- [Resizable props, examples & playground](https://app-studio-6167b.web.app/docs/Resizable.md): A flexible container that allows users to resize its content areas by dragging adjustable dividers.
- [Separator props, examples & playground](https://app-studio-6167b.web.app/docs/Separator.md): A visual element used to divide or group content on a user interface.
- [Sidebar props, examples & playground](https://app-studio-6167b.web.app/docs/Sidebar.md): A versatile layout component for navigation or content, typically positioned at the screen edges.
- [BlockEditor props, examples & playground](https://app-studio-6167b.web.app/docs/BlockEditor.md): A Markdown block editor built from App Studio primitives, without an external editor engine.
- [AudioInput props, examples & playground](https://app-studio-6167b.web.app/docs/AudioInput.md): Provides a user interface for recording, playing, and uploading audio content.
- [Button props, examples & playground](https://app-studio-6167b.web.app/docs/Button.md): A versatile button component for user interaction with various styles, sizes, shapes, and interactive effects.
- [Checkbox props, examples & playground](https://app-studio-6167b.web.app/docs/Checkbox.md): A customizable checkbox form element with optional label and various views.
- [ColorPicker props, examples & playground](https://app-studio-6167b.web.app/docs/ColorPicker.md): A customizable color picker component with predefined colors, custom input, recent colors, and various color formats.
- [ComboBox props, examples & playground](https://app-studio-6167b.web.app/docs/ComboBox.md): A customizable dropdown list with optional search functionality.
- [CountryPicker props, examples & playground](https://app-studio-6167b.web.app/docs/CountryPicker.md): Enables users to select a country from a dropdown list with various styling options.
- [DatePicker props, examples & playground](https://app-studio-6167b.web.app/docs/DatePicker.md): A customizable date selection input for user interfaces.
- [EmojiPicker props, examples & playground](https://app-studio-6167b.web.app/docs/EmojiPicker.md): A user-friendly tool for selecting and inserting emojis into text inputs or forms.
- [Formik props, examples & playground](https://app-studio-6167b.web.app/docs/Formik.md): Formik bindings for App Studio fields. Keep validation and submission in Formik while reusing the same labels, variants, and styling props.
- [OTPInput props, examples & playground](https://app-studio-6167b.web.app/docs/OTPInput.md): A component to securely input one-time passwords or verification codes digit by digit.
- [Password props, examples & playground](https://app-studio-6167b.web.app/docs/Password.md): A password field with a visibility toggle. Connect its value and change callback, then reuse the labels, validation, and styling props of TextField.
- [Select props, examples & playground](https://app-studio-6167b.web.app/docs/Select.md): A customizable UI component for selecting from a list of options.
- [Selector props, examples & playground](https://app-studio-6167b.web.app/docs/Selector.md): A segmented control UI component for selecting from a limited list of options, typically used for toggling states or selecting mutually exclusive options like complexity or priority.
- [Slider props, examples & playground](https://app-studio-6167b.web.app/docs/Slider.md): The Slider component allows users to select a single value from a predefined range by dragging a thumb.
- [Switch props, examples & playground](https://app-studio-6167b.web.app/docs/Switch.md): A toggle switch for user interactions like turning settings on or off.
- [TagInput props, examples & playground](https://app-studio-6167b.web.app/docs/TagInput.md): A form input component for managing a list of tags. Users can add tags by typing and pressing Enter or comma, and remove them by clicking the X button or using backspace.
- [TextArea props, examples & playground](https://app-studio-6167b.web.app/docs/TextArea.md): A text input field for multi-line text editing with customizable features.
- [TextField props, examples & playground](https://app-studio-6167b.web.app/docs/TextField.md): A customizable text input field with optional helpers, labels, and icons.
- [Toggle props, examples & playground](https://app-studio-6167b.web.app/docs/Toggle.md): A versatile control allowing users to switch between two states, enabling or disabling features.
- [ToggleGroup props, examples & playground](https://app-studio-6167b.web.app/docs/ToggleGroup.md): A group of toggle buttons allowing users to select one or more options.
- [Uploader props, examples & playground](https://app-studio-6167b.web.app/docs/Uploader.md): A versatile file upload component with support for images, videos, and files, featuring drag-and-drop, preview, progress tracking, and validation.
- [Accordion props, examples & playground](https://app-studio-6167b.web.app/docs/Accordion.md): Organizes content into collapsible sections for efficient space management.
- [ContextMenu props, examples & playground](https://app-studio-6167b.web.app/docs/ContextMenu.md): A floating menu that appears upon user interaction, typically a right-click or long-press.
- [DropdownMenu props, examples & playground](https://app-studio-6167b.web.app/docs/DropdownMenu.md): A versatile component for displaying a list of interactive items in a popup, triggered by another element.
- [Link props, examples & playground](https://app-studio-6167b.web.app/docs/Link.md): This component provides a navigational link that can render children, manage external links, and apply various text decoration styles.
- [Menubar props, examples & playground](https://app-studio-6167b.web.app/docs/Menubar.md): A versatile component for structured navigation, displaying a list of interactive items and their sub-menus.
- [NavigationMenu props, examples & playground](https://app-studio-6167b.web.app/docs/NavigationMenu.md): A flexible navigation menu component that supports nested items, icons, and different orientations.
- [Pagination props, examples & playground](https://app-studio-6167b.web.app/docs/Pagination.md): A pagination component for navigating through pages with customizable appearance, page size selection, and navigation controls.
- [Tabs props, examples & playground](https://app-studio-6167b.web.app/docs/Tabs.md): A versatile component for organizing and displaying content in separate, selectable sections.
- [Markdown props, examples & playground](https://app-studio-6167b.web.app/docs/Markdown.md): `Markdown` affiche un document sur le web et React Native avec les primitives App Studio. Il partage le moteur de rendu de `BlockEditor`, sans ajouter de dépendance ni de surface d'édition.
- [AttachmentGroup props, examples & playground](https://app-studio-6167b.web.app/docs/AttachmentGroup.md): The `AttachmentGroup` component displays a list of file attachments, typically used in chat interfaces or upload previews. It supports displaying thumbnails for images and videos, and generic icons for other file types. It also provides a mechanism to remove attachments.
- [Avatar props, examples & playground](https://app-studio-6167b.web.app/docs/Avatar.md): Displays a user's avatar, which can be an image or initials, with customizable size and styles.
- [Badge props, examples & playground](https://app-studio-6167b.web.app/docs/Badge.md): Renders a badge with various styles and states according to the design guidelines.
- [Carousel props, examples & playground](https://app-studio-6167b.web.app/docs/Carousel.md): A versatile component for displaying a collection of content in a rotating sequence with navigation.
- [Chart props, examples & playground](https://app-studio-6167b.web.app/docs/Chart.md): A comprehensive charting component for visualizing data in various formats including bar, line, area, pie, and donut charts.
- [Icon props, examples & playground](https://app-studio-6167b.web.app/docs/Icon.md): A comprehensive collection of SVG icons powered by [Lucide React](https://lucide.dev/), offering consistent styling, customizable colors, sizes, and orientations. All icons are optimized for accessibility and performance.
- [IconPicker props, examples & playground](https://app-studio-6167b.web.app/docs/IconPicker.md): A dropdown component for selecting icons from a predefined list (Lucide icons).
- [Table props, examples & playground](https://app-studio-6167b.web.app/docs/Table.md): Renders a tabular display for presenting structured data with customizable styles.
- [Title props, examples & playground](https://app-studio-6167b.web.app/docs/Title.md): Displays customizable titles with highlighting, responsive sizing, animation effects, and multi-line support.
- [Tooltip props, examples & playground](https://app-studio-6167b.web.app/docs/Tooltip.md): A tooltip component for displaying contextual information on hover or focus, with customizable positioning, styling, and behavior.
- [Alert props, examples & playground](https://app-studio-6167b.web.app/docs/Alert.md): Displays important messages to users with various styles and states.
- [CookieConsent props, examples & playground](https://app-studio-6167b.web.app/docs/CookieConsent.md): Displays a customizable banner to manage user consent for cookies, enhancing user experience.
- [Loader props, examples & playground](https://app-studio-6167b.web.app/docs/Loader.md): A loading indicator component with multiple types, sizes, speeds, and text positioning options.
- [Message props, examples & playground](https://app-studio-6167b.web.app/docs/Message.md): Display application messages with showMessage and a mounted MessageLayout. MessageView supplies the presentation props below.
- [ProgressBar props, examples & playground](https://app-studio-6167b.web.app/docs/ProgressBar.md): A progress bar component for displaying progress or completion status with customizable colors, shapes (linear or circular), and styling.
- [StatusIndicator props, examples & playground](https://app-studio-6167b.web.app/docs/StatusIndicator.md): A status indicator component for displaying status states with labels and customizable styling.
- [Toast props, examples & playground](https://app-studio-6167b.web.app/docs/Toast.md): Displays temporary, dismissible messages to inform users about actions, status, or events.
- [ChatInput props, examples & playground](https://app-studio-6167b.web.app/docs/ChatInput.md): A chat composer with file attachments, prompt examples, `@` mentions, suggestions, audio recording and agent controls.
- [ChatWidget props, examples & playground](https://app-studio-6167b.web.app/docs/ChatWidget.md): ---
- [Command props, examples & playground](https://app-studio-6167b.web.app/docs/Command.md): A versatile component for searching, filtering, and executing commands or actions.
- [DragAndDrop props, examples & playground](https://app-studio-6167b.web.app/docs/DragAndDrop.md): A drag-and-drop component for reordering items with touch and mouse support.
- [DropZone props, examples & playground](https://app-studio-6167b.web.app/docs/DropZone.md): The `DropZone` component provides a drag-and-drop area for file uploads. It extends the functionality of the `Uploader` component but offers a specific UI optimized for dropping files. It supports single and multiple file selection, custom content, and image previews.
- [EditComponent props, examples & playground](https://app-studio-6167b.web.app/docs/EditComponent.md): Attach an editing toolbar to a selected DOM element in the repository editor. Choose a target element and handle tool actions explicitly.
- [Gradient props, examples & playground](https://app-studio-6167b.web.app/docs/Gradient.md): A versatile gradient component supporting linear, radial, and conic gradients with animation capabilities.
- [Center props, examples & playground](https://app-studio-6167b.web.app/docs/Center.md): A layout component that centers its children both horizontally and vertically within its bounds using CSS Flexbox. Perfect for creating loading states, empty states, modal content, hero sections, and any content that needs perfect centering.
- [ColorInput props, examples & playground](https://app-studio-6167b.web.app/docs/ColorInput.md): A form-integrated color picker component that allows users to select colors from a predefined palette or enter custom color values.
- [File props, examples & playground](https://app-studio-6167b.web.app/docs/File.md): A component for displaying file icons and images with customizable colors and theming support.
- [Form props, examples & playground](https://app-studio-6167b.web.app/docs/Form.md): A semantic web form built on App Studio primitives. Connect submission and field state explicitly, or use the Formik wrappers for validation.
- [Horizontal props, examples & playground](https://app-studio-6167b.web.app/docs/Horizontal.md): Aligns child components horizontally, with optional reverse order.
- [Label props, examples & playground](https://app-studio-6167b.web.app/docs/Label.md): A semantic text element designed for form labels and descriptive text with comprehensive typography options, accessibility features, and flexible styling. Perfect for form fields, section headers, and any text that needs semantic meaning.
- [ShareButton props, examples & playground](https://app-studio-6167b.web.app/docs/ShareButton.md): A button that allows users to share content from the web application using the device's native sharing capabilities.
- [Text props, examples & playground](https://app-studio-6167b.web.app/docs/Text.md): Render semantic text with typography, color tokens, emphasis, and line limits. Choose the appropriate element with as and customize its styling through props.
- [Vertical props, examples & playground](https://app-studio-6167b.web.app/docs/Vertical.md): A flexible layout component that arranges its children in a vertical stack using CSS Flexbox. Perfect for creating column layouts, forms, navigation menus, and any vertical arrangement of elements with powerful spacing and alignment options.

## Optional

- [Complete documentation](https://app-studio-6167b.web.app/llms-full.txt): All public pages in one larger Markdown file. Prefer individual pages for focused tasks.
- [Framework source](https://github.com/rize-network/app-studio): Styling engine implementation and MIT license.
- [Component source](https://github.com/rize-network/app-studio-components): Component implementation, examples, and package license.