suiss/uim · Block

Signup Trial

A free trial sign-up screen with a hero image, email and password fields, and a terms checkbox.

Signup Trial is an open-source mobile screen from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

iOS
Signup Trial on iOS in light mode

A hero image sits above an InputAccessoryBar with email and password inputs; the password shows a five-level strength meter as you type. A Checkbox with a Label accepts the terms, and the Start free trial Button in the BottomBar stays disabled until the form is valid, then shows a welcome screen. A sign-in link sits below.

Installation

$ pnpm dlx @esuiss/uim@latest add signup-trial

The CLI also adds what it builds on: Bottom Bar, Button, Checkbox, Icon, Input Accessory Bar, Keyboard Scroll View, Label, Screen, Text.

Manual

  1. Install the dependencies:
npx expo install cn phosphor-react-native react-native-reanimated react-native-svg react-native-worklets

  1. Add the pieces it builds on: Bottom Bar, Button, Checkbox, Icon, Input Accessory Bar, Keyboard Scroll View, Label, Screen, Text.

  2. Copy the source into components/blocks/signup-trial.tsx:

uniwind/components/blocks/signup-trial.tsx
import { cn } from "cn"
import { CheckIcon, MusicNotesIcon } from "phosphor-react-native"
import * as React from "react"
import { Image, Pressable, View } from "react-native"
import { FadeIn, FadeInDown, ReduceMotion } from "react-native-reanimated"
import { AnimatedView } from "@/components/ui/animated-view"
import { BottomBar, BottomBarContent } from "@/components/ui/bottom-bar"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Icon } from "@/components/ui/icon"
import {
  InputAccessoryBar,
  InputAccessoryBarInput,
} from "@/components/ui/input-accessory-bar"
import { KeyboardScrollView } from "@/components/ui/keyboard-scroll-view"
import { Label } from "@/components/ui/label"
  1. Update the import paths to match your project.

Usage

import { SignupTrial } from "@/components/blocks/signup-trial"
<SignupTrial />

Replace IMAGE and the copy with your own. onSubmit receives the email and password, and onSignIn handles the sign-in link. The hero photo is an Unsplash placeholder.