export const title = "Mobile app store button components"
export const description = "Free and open-source React mobile app store button components built for modern applications and websites. These mobile app store buttons are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/buttons/app-store-buttons.tsx",
}
import * as Demos from "@/components/base/buttons/app-store-buttons.demo.tsx";

<PreviewAndCode title="Mobile app store buttons example">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.AppStoreButtonDefaultDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
         <ComponentCode component="app-store-buttons/AppStoreButtonDefaultDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this mobile app store button component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add app-store-buttons
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/app-store-buttons" filepath="buttons/app-store-buttons-outline" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the mobile app store button components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Mobile app store button examples

Below are examples and variations of this mobile app store button component:

### Google play buttons {{ tocOnly:true }}

<PreviewAndCode title="Google play buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
            <Demos.AppStoreButtonGooglePlayDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="app-store-buttons/AppStoreButtonGooglePlayDemo" />
    </TabPanel>
</PreviewAndCode>

### App store buttons {{ tocOnly:true }}

<PreviewAndCode title="App store buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.AppStoreButtonAppStoreDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="app-store-buttons/AppStoreButtonAppStoreDemo" />
    </TabPanel>
</PreviewAndCode>

### Galaxy store buttons {{ tocOnly:true }}

<PreviewAndCode title="Galaxy store buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.AppStoreButtonGalaxyStoreDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="app-store-buttons/AppStoreButtonGalaxyStoreDemo" />
    </TabPanel>
</PreviewAndCode>

### App gallery buttons {{ tocOnly:true }}

<PreviewAndCode title="App gallery buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.AppStoreButtonAppGalleryDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="app-store-buttons/AppStoreButtonAppGalleryDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Outline button examples

Below are some outline versions of the mobile app store button component.

### Google play outline buttons {{ tocOnly:true }}

<PreviewAndCode title="Google play outline buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.AppStoreButtonGooglePlayOutlineDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="app-store-buttons/AppStoreButtonGooglePlayOutlineDemo" />
    </TabPanel>
</PreviewAndCode>

### App store outline buttons {{ tocOnly:true }}

<PreviewAndCode title="App store outline buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.AppStoreButtonAppStoreOutlineDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="app-store-buttons/AppStoreButtonAppStoreOutlineDemo" />
    </TabPanel>
</PreviewAndCode>

### Galaxy store outline buttons {{ tocOnly:true }}

<PreviewAndCode title="Galaxy store outline buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.AppStoreButtonGalaxyStoreOutlineDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="app-store-buttons/AppStoreButtonGalaxyStoreOutlineDemo" />
    </TabPanel>
</PreviewAndCode>

### App gallery outline buttons {{ tocOnly:true }}

<PreviewAndCode title="App gallery outline buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.AppStoreButtonAppGalleryOutlineDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="app-store-buttons/AppStoreButtonAppGalleryOutlineDemo" />
    </TabPanel>
</PreviewAndCode>