Android

barista price

import { Box } from "@/components/ui/box";
import { Card } from "@/components/ui/card";
import { Heading } from "@/components/ui/heading";
import { Text } from "@/components/ui/text";
import { Image } from "@/components/ui/image";
import { Button, ButtonGroup, ButtonText } from "@/components/ui/button";
import { HStack } from "@/components/ui/hstack";
import { VStack } from "@/components/ui/vstack";

export default function Price() {
  return (
    <Card
      size="md"
      variant="elevated"
      className={"w-full h-full justify-center"}
    >
      <Heading size="2xl" className="mb-6 text-center text-amber-900">
        BARISTA
      </Heading>
      <Box className="justify-center items-center">
        <Image
          className={"text-center h-96 w-96"}
          source={
            "https://png.pngtree.com/png-clipart/20250105/original/pngtree-barista-serving-coffee-illustration-png-image_19011031.png"
          }
        ></Image>
      </Box>

      <VStack space={"3xl"} className={"mt-6"}>
        <Text
          size="xl"
          className={
            "max-w-72 mx-auto text-center font-semibold text-typography-950"
          }
        >
          Brewed to perfection, served with passion!
        </Text>

        <HStack space={"sm"} className={"justify-center items-end"}>
          <Text
            size={"2xl"}
            className={"self-start text-typography-400"}
            style={{
              top: 8,
            }}
          >
            €
          </Text>
          <Heading
            size="5xl"
            style={{
              top: 8,
            }}
          >
            25
          </Heading>
          <Text size={"xl"} className={"text-typography-400"}>
            / month
          </Text>
        </HStack>

        <ButtonGroup className="mx-8 mt-3">
          <Button
            variant="solid"
            className={
              "rounded-xl px-6 h-16 bg-amber-800 data-[hover=true]:bg-amber-600 data-[active=true]:bg-amber-700 border-amber-300 data-[hover=true]:border-amber-400 data-[active=true]:border-amber-500 data-[focus-visible=true]:web:ring-indicator-info"
            }
          >
            <ButtonText size={"lg"}>ACTIVE PLAN</ButtonText>
          </Button>
        </ButtonGroup>
      </VStack>
    </Card>
  );
}

free starter price

import { Box } from "@/components/ui/box";
import { Card } from "@/components/ui/card";
import { Heading } from "@/components/ui/heading";
import { Text } from "@/components/ui/text";
import { Image } from "@/components/ui/image";
import { Button, ButtonGroup, ButtonText } from "@/components/ui/button";
import { VStack } from "@/components/ui/vstack";

export default function FreeStarterPrice() {
  return (
    <Card
      size="md"
      variant="elevated"
      className={"w-full h-full justify-center"}
    >
      <Heading size="xl" className="mb-19 text-center">
        STARTER
      </Heading>
      <Box className="justify-center items-center mt-10">
        <Image
          className={"text-center h-96 w-96"}
          source={"https://cdn-icons-png.flaticon.com/512/5824/5824788.png"}
        ></Image>
      </Box>

      <VStack space={"3xl"} className={"mt-6"}>
        <Text
          size="xl"
          className={
            "max-w-60 mx-auto text-center font-semibold text-typography-950"
          }
        >
          Stay home
        </Text>

        <VStack space={"xs"} className={"justify-center items-center"}>
          <Heading size="5xl" style={{ top: 6 }}>
            Free
          </Heading>
          <Text size={"xl"} className={"text-typography-400"}>
            Join Now
          </Text>
        </VStack>

        <ButtonGroup className="mx-16 mt-3">
          <Button
            variant="solid"
            className={
              "rounded-xl px-6 h-16 bg-gray-200 data-[hover=true]:bg-gray-300 data-[active=true]:bg-gray-400 border-gray-300 data-[hover=true]:border-gray-400 data-[active=true]:border-gray-500 data-[focus-visible=true]:web:ring-indicator-info"
            }
          >
            <ButtonText
              size={"lg"}
              className={"text-typography-900 font-semibold"}
            >
              ACTIVE PLAN
            </ButtonText>
          </Button>
        </ButtonGroup>
      </VStack>
    </Card>
  );
}

actionsheet horizontal price

Build products for everyone

Get all-access

import { Card } from '@/components/ui/card';
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
import { Button, ButtonText } from '@/components/ui/button';
import { VStack } from '@/components/ui/vstack';

export default function Price() {
  return (
    <Card
      size='md'
      variant='elevated'
      className={'w-full h-full justify-center'}
    >
      <Heading size='2xl' className='mb-6 text-center text-amber-900'>
        NativeStack UI
      </Heading>

      <VStack space={'3xl'} className={'mt-6'}>
        <Text
          size='xl'
          className={
            'max-w-72 mx-auto text-center font-semibold text-typography-950'
          }
        >
          Build your app faster with the largest React native UI kit
        </Text>

          <Button
            variant='solid'
            className={
              'rounded-xl px-6 h-16 bg-amber-800 data-[hover=true]:bg-amber-600 data-[active=true]:bg-amber-700 border-amber-300 data-[hover=true]:border-amber-400 data-[active=true]:border-amber-500 data-[focus-visible=true]:web:ring-indicator-info'
            }
          >
            <ButtonText size={'lg'}>Get all-access</ButtonText>
          </Button>
      </VStack>
    </Card>
  );
}

import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import ActionsheetHorizontalPrice from "@/nativestack-ui/price-sections/pro/actionsheet-horizontal-price";

export default function TabHomeScreen() {
  return (
    <SafeAreaView style={{ backgroundColor: "#ddd" }}>
      <StatusBar style={"dark"} backgroundColor={"#fff"} />
      <ActionsheetHorizontalPrice />
    </SafeAreaView>
  );
}

actionsheet vertical price

Build products for everyone

Get all-access

import { Card } from '@/components/ui/card';
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
import { Button, ButtonText } from '@/components/ui/button';
import { VStack } from '@/components/ui/vstack';

export default function Price() {
  return (
    <Card
      size='md'
      variant='elevated'
      className={'w-full h-full justify-center'}
    >
      <Heading size='2xl' className='mb-6 text-center text-amber-900'>
        NativeStack UI
      </Heading>

      <VStack space={'3xl'} className={'mt-6'}>
        <Text
          size='xl'
          className={
            'max-w-72 mx-auto text-center font-semibold text-typography-950'
          }
        >
          Build your app faster with the largest React native UI kit
        </Text>

          <Button
            variant='solid'
            className={
              'rounded-xl px-6 h-16 bg-amber-800 data-[hover=true]:bg-amber-600 data-[active=true]:bg-amber-700 border-amber-300 data-[hover=true]:border-amber-400 data-[active=true]:border-amber-500 data-[focus-visible=true]:web:ring-indicator-info'
            }
          >
            <ButtonText size={'lg'}>Get all-access</ButtonText>
          </Button>
      </VStack>
    </Card>
  );
}

import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import ActionsheetVerticalPrice from "@/nativestack-ui/price-sections/pro/actionsheet-vertical-price";

export default function TabHomeScreen() {
  return (
    <SafeAreaView style={{ backgroundColor: "#ddd" }}>
      <StatusBar style={"dark"} backgroundColor={"#fff"} />
      <ActionsheetVerticalPrice />
    </SafeAreaView>
  );
}