NativeStack UI Templates

coffee shop Template

Accelerate your React Native app development with a flexible UI library. Build faster without sacrificing your vision, using modern components that seamlessly integrate into your codebase.

React

coffee shop In action...

Built with modern technologies

Each template is a well-structured Expo project, giving you a codebase that’s productive and enjoyable to work in.

Easy to customize

Everything is styled with utility classes, just open the markup in your editor and change whatever you want.

Get the Code now!

Double click on file name to view the code in the editor

components

checkout-icon.tsx

confirm-delete-dialog.tsx

context

CartContext.tsx

fixtures

coffees.ts

repositories

coffeeRespository.ts

screens

(coffee)

_layout.tsx

checkout.tsx

favorites.tsx

index.tsx

notifications.tsx

details

[id].tsx

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>
  );
}