Source: https://app-studio-6167b.web.app/docs/components COMPONENT LIBRARY # Find your building blocks. Browse the library, try a few controls, then open a component’s reference or its existing examples. TRY THE REAL THING ## Components you can interact with. These controls use the library itself. Toggle an option or switch between preview and code. [Build your first interface](https://app-studio-6167b.web.app/docs/quick-start) 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) 77 components Navigation ## [Accordion](https://app-studio-6167b.web.app/docs/Accordion) Explore the Accordion component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Accordion)[View examples](https://app-studio-6167b.web.app/accordion) Feedback ## [Alert](https://app-studio-6167b.web.app/docs/Alert) Explore the Alert component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Alert)[View examples](https://app-studio-6167b.web.app/alert) Layout ## [AspectRatio](https://app-studio-6167b.web.app/docs/AspectRatio) Explore the AspectRatio component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/AspectRatio)[View examples](https://app-studio-6167b.web.app/aspectratio) Data Display ## [AttachmentGroup](https://app-studio-6167b.web.app/docs/AttachmentGroup) Explore the AttachmentGroup component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/AttachmentGroup)[View examples](https://app-studio-6167b.web.app/attachment-group) Inputs ## [Audio Input](https://app-studio-6167b.web.app/docs/AudioInput) Explore the Audio Input component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/AudioInput)[View examples](https://app-studio-6167b.web.app/audio-input) Data Display ## [Avatar](https://app-studio-6167b.web.app/docs/Avatar) Explore the Avatar component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Avatar)[View examples](https://app-studio-6167b.web.app/avatar) Layout ## [Background](https://app-studio-6167b.web.app/docs/Background) Explore the Background component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Background)[View examples](https://app-studio-6167b.web.app/background) Data Display ## [Badge](https://app-studio-6167b.web.app/docs/Badge) Explore the Badge component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Badge)[View examples](https://app-studio-6167b.web.app/badge) Inputs ## [BlockEditor](https://app-studio-6167b.web.app/docs/BlockEditor) Explore the BlockEditor component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/BlockEditor)[View examples](https://app-studio-6167b.web.app/blockeditor) Inputs ## [Button](https://app-studio-6167b.web.app/docs/Button) Explore the Button component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Button)[View examples](https://app-studio-6167b.web.app/button) Layout ## [Card](https://app-studio-6167b.web.app/docs/Card) Explore the Card component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Card)[View examples](https://app-studio-6167b.web.app/card) Data Display ## [Carousel](https://app-studio-6167b.web.app/docs/Carousel) Explore the Carousel component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Carousel)[View examples](https://app-studio-6167b.web.app/carousel) Layout ## [Center](https://app-studio-6167b.web.app/docs/Center) Explore the Center component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Center) Data Display ## [Chart](https://app-studio-6167b.web.app/docs/Chart) Explore the Chart component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Chart)[View examples](https://app-studio-6167b.web.app/chart) Experimental ## [Chat](https://app-studio-6167b.web.app/docs/ChatInput) Explore the Chat component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/ChatInput)[View examples](https://app-studio-6167b.web.app/chat) Experimental ## [ChatWidget](https://app-studio-6167b.web.app/docs/ChatWidget) Explore the ChatWidget component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/ChatWidget)[View examples](https://app-studio-6167b.web.app/chat-widget) Inputs ## [Checkbox](https://app-studio-6167b.web.app/docs/Checkbox) Explore the Checkbox component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Checkbox)[View examples](https://app-studio-6167b.web.app/checkbox) Inputs ## [ColorInput](https://app-studio-6167b.web.app/docs/ColorInput) Explore the ColorInput component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/ColorInput) Inputs ## [ColorPicker](https://app-studio-6167b.web.app/docs/ColorPicker) Explore the ColorPicker component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/ColorPicker)[View examples](https://app-studio-6167b.web.app/colorpicker) Inputs ## [ComboBox](https://app-studio-6167b.web.app/docs/ComboBox) Explore the ComboBox component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/ComboBox)[View examples](https://app-studio-6167b.web.app/combobox) Experimental ## [Command](https://app-studio-6167b.web.app/docs/Command) Explore the Command component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Command)[View examples](https://app-studio-6167b.web.app/command) Navigation ## [ContextMenu](https://app-studio-6167b.web.app/docs/ContextMenu) Explore the ContextMenu component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/ContextMenu)[View examples](https://app-studio-6167b.web.app/contextmenu) Feedback ## [CookieConsent](https://app-studio-6167b.web.app/docs/CookieConsent) Explore the CookieConsent component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/CookieConsent)[View examples](https://app-studio-6167b.web.app/cookieconsent) Inputs ## [CountryPicker](https://app-studio-6167b.web.app/docs/CountryPicker) Explore the CountryPicker component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/CountryPicker)[View examples](https://app-studio-6167b.web.app/countrypicker) Inputs ## [DatePicker](https://app-studio-6167b.web.app/docs/DatePicker) Explore the DatePicker component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/DatePicker)[View examples](https://app-studio-6167b.web.app/datepicker) Experimental ## [Drag and Drop](https://app-studio-6167b.web.app/docs/DragAndDrop) Explore the Drag and Drop component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/DragAndDrop)[View examples](https://app-studio-6167b.web.app/dragAndDrop) Layout ## [Drawer](https://app-studio-6167b.web.app/docs/Drawer) Explore the Drawer component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Drawer)[View examples](https://app-studio-6167b.web.app/drawer) Navigation ## [DropdownMenu](https://app-studio-6167b.web.app/docs/DropdownMenu) Explore the DropdownMenu component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/DropdownMenu)[View examples](https://app-studio-6167b.web.app/dropdownmenu) Experimental ## [DropZone](https://app-studio-6167b.web.app/docs/DropZone) Explore the DropZone component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/DropZone)[View examples](https://app-studio-6167b.web.app/dropzone) Experimental ## [EditComponent](https://app-studio-6167b.web.app/docs/EditComponent) Explore the EditComponent component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/EditComponent)[View examples](https://app-studio-6167b.web.app/edit-component) Inputs ## [EmojiPicker](https://app-studio-6167b.web.app/docs/EmojiPicker) Explore the EmojiPicker component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/EmojiPicker)[View examples](https://app-studio-6167b.web.app/emojipicker) Inputs ## [File](https://app-studio-6167b.web.app/docs/File) Explore the File component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/File) Inputs ## [Form](https://app-studio-6167b.web.app/docs/Form) Explore the Form component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Form) Inputs ## [Formik](https://app-studio-6167b.web.app/docs/Formik) Explore the Formik component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Formik)[View examples](https://app-studio-6167b.web.app/formik) Experimental ## [Gradient](https://app-studio-6167b.web.app/docs/Gradient) Explore the Gradient component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Gradient)[View examples](https://app-studio-6167b.web.app/gradient) Layout ## [Horizontal](https://app-studio-6167b.web.app/docs/Horizontal) Explore the Horizontal component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Horizontal) Layout ## [HoverCard](https://app-studio-6167b.web.app/docs/HoverCard) Explore the HoverCard component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/HoverCard)[View examples](https://app-studio-6167b.web.app/hovercard) Data Display ## [Icon](https://app-studio-6167b.web.app/docs/Icon) Explore the Icon component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Icon)[View examples](https://app-studio-6167b.web.app/icon) Inputs ## [IconPicker](https://app-studio-6167b.web.app/docs/IconPicker) Explore the IconPicker component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/IconPicker)[View examples](https://app-studio-6167b.web.app/iconpicker) Layout ## [KeyboardAvoidingView](https://app-studio-6167b.web.app/docs/KeyboardAvoidingView) Explore the KeyboardAvoidingView component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/KeyboardAvoidingView)[View examples](https://app-studio-6167b.web.app/keyboardavoidingview) Inputs ## [Label](https://app-studio-6167b.web.app/docs/Label) Explore the Label component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Label) Navigation ## [Link](https://app-studio-6167b.web.app/docs/Link) Explore the Link component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Link)[View examples](https://app-studio-6167b.web.app/link) Feedback ## [Loader](https://app-studio-6167b.web.app/docs/Loader) Explore the Loader component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Loader)[View examples](https://app-studio-6167b.web.app/loader) Data Display ## [Markdown](https://app-studio-6167b.web.app/docs/Markdown) Explore the Markdown component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Markdown)[View examples](https://app-studio-6167b.web.app/markdown) Navigation ## [Menubar](https://app-studio-6167b.web.app/docs/Menubar) Explore the Menubar component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Menubar)[View examples](https://app-studio-6167b.web.app/menubar) Feedback ## [Message](https://app-studio-6167b.web.app/docs/Message) Explore the Message component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Message)[View examples](https://app-studio-6167b.web.app/message) Layout ## [Modal](https://app-studio-6167b.web.app/docs/Modal) Explore the Modal component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Modal)[View examples](https://app-studio-6167b.web.app/modal) Navigation ## [NavigationMenu](https://app-studio-6167b.web.app/docs/NavigationMenu) Explore the NavigationMenu component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/NavigationMenu)[View examples](https://app-studio-6167b.web.app/navigationmenu) Inputs ## [OTP Input](https://app-studio-6167b.web.app/docs/OTPInput) Explore the OTP Input component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/OTPInput)[View examples](https://app-studio-6167b.web.app/otpinput) Layout ## [PageLayout](https://app-studio-6167b.web.app/docs/PageLayout) Explore the PageLayout component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/PageLayout)[View examples](https://app-studio-6167b.web.app/pagelayout) Navigation ## [Pagination](https://app-studio-6167b.web.app/docs/Pagination) Explore the Pagination component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Pagination)[View examples](https://app-studio-6167b.web.app/pagination) Inputs ## [Password](https://app-studio-6167b.web.app/docs/Password) Explore the Password component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Password)[View examples](https://app-studio-6167b.web.app/password) Feedback ## [ProgressBar](https://app-studio-6167b.web.app/docs/ProgressBar) Explore the ProgressBar component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/ProgressBar)[View examples](https://app-studio-6167b.web.app/progress-bar) Layout ## [Resizable](https://app-studio-6167b.web.app/docs/Resizable) Explore the Resizable component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Resizable)[View examples](https://app-studio-6167b.web.app/resizable) Navigation ## [Router](https://app-studio-6167b.web.app/docs/Router) Explore the Router component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Router)[View examples](https://app-studio-6167b.web.app/router) Inputs ## [Select](https://app-studio-6167b.web.app/docs/Select) Explore the Select component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Select)[View examples](https://app-studio-6167b.web.app/select) Inputs ## [Selector](https://app-studio-6167b.web.app/docs/Selector) Explore the Selector component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Selector)[View examples](https://app-studio-6167b.web.app/selector) Layout ## [Separator](https://app-studio-6167b.web.app/docs/Separator) Explore the Separator component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Separator)[View examples](https://app-studio-6167b.web.app/separator) Utility ## [ShareButton](https://app-studio-6167b.web.app/docs/ShareButton) Explore the ShareButton component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/ShareButton) Layout ## [Sidebar](https://app-studio-6167b.web.app/docs/Sidebar) Explore the Sidebar component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Sidebar)[View examples](https://app-studio-6167b.web.app/sidebar) Inputs ## [Slider](https://app-studio-6167b.web.app/docs/Slider) Explore the Slider component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Slider)[View examples](https://app-studio-6167b.web.app/slider) Feedback ## [SplashScreen](https://app-studio-6167b.web.app/docs/SplashScreen) Explore the SplashScreen component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/SplashScreen)[View examples](https://app-studio-6167b.web.app/splashscreen) Feedback ## [StatusIndicator](https://app-studio-6167b.web.app/docs/StatusIndicator) Explore the StatusIndicator component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/StatusIndicator)[View examples](https://app-studio-6167b.web.app/status-indicator) Inputs ## [Switch](https://app-studio-6167b.web.app/docs/Switch) Explore the Switch component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Switch)[View examples](https://app-studio-6167b.web.app/switch) Data Display ## [Table](https://app-studio-6167b.web.app/docs/Table) Explore the Table component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Table)[View examples](https://app-studio-6167b.web.app/table) Navigation ## [Tabs](https://app-studio-6167b.web.app/docs/Tabs) Explore the Tabs component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Tabs)[View examples](https://app-studio-6167b.web.app/tabs) Inputs ## [TagInput](https://app-studio-6167b.web.app/docs/TagInput) Explore the TagInput component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/TagInput)[View examples](https://app-studio-6167b.web.app/tagInput) Data Display ## [Text](https://app-studio-6167b.web.app/docs/Text) Explore the Text component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Text) Inputs ## [TextArea](https://app-studio-6167b.web.app/docs/TextArea) Explore the TextArea component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/TextArea)[View examples](https://app-studio-6167b.web.app/textarea) Inputs ## [Textfield](https://app-studio-6167b.web.app/docs/TextField) Explore the Textfield component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/TextField)[View examples](https://app-studio-6167b.web.app/textfield) Data Display ## [Title](https://app-studio-6167b.web.app/docs/Title) Explore the Title component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Title)[View examples](https://app-studio-6167b.web.app/title) Feedback ## [Toast](https://app-studio-6167b.web.app/docs/Toast) Explore the Toast component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Toast)[View examples](https://app-studio-6167b.web.app/toast) Inputs ## [Toggle](https://app-studio-6167b.web.app/docs/Toggle) Explore the Toggle component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Toggle)[View examples](https://app-studio-6167b.web.app/toggle) Inputs ## [ToggleGroup](https://app-studio-6167b.web.app/docs/ToggleGroup) Explore the ToggleGroup component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/ToggleGroup)[View examples](https://app-studio-6167b.web.app/togglegroup) Data Display ## [Tooltip](https://app-studio-6167b.web.app/docs/Tooltip) Explore the Tooltip component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Tooltip)[View examples](https://app-studio-6167b.web.app/tooltip) Inputs ## [Upload](https://app-studio-6167b.web.app/docs/Uploader) Explore the Upload component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Uploader)[View examples](https://app-studio-6167b.web.app/upload) Layout ## [Vertical](https://app-studio-6167b.web.app/docs/Vertical) Explore the Vertical component, its variants, and its interactions. [Reference](https://app-studio-6167b.web.app/docs/Vertical)