background banner showing a few examples of screens built using SpiroKit React Native UI Kit
SpiroKit logo

Build industry-level
mobile apps in no time

A React Native & Figma UI Kit for developers.
Validate your ideas in hours, not weeks.

<VStack>
  <Image 
    source={{ uri: "https://path/to/image.png" }} 
    alt="Landscape"
    height={48}
  </Image>
  <VStack padding={6} space={4}>
    <TitleThree fontWeight="semibold">How was your trip?</TitleThree>
    <Input
      placeholder="Enter your comments..."
      LabelComponent={<Subhead>What can our employees do better?</Subhead>}>
    </Input>
    <VStack>
      <Subhead>How likely are you to recommend our services to others?</Subhead>
      <Radio.Group value="1" name="radio-group">
        <Radio value="1">Very likely</Radio>
        <Radio value="2">Somewhat likely</Radio>
        <Radio value="3">Neither likely nor unlikely</Radio>
        <Radio value="4">Unlikely</Radio>
      </Radio.Group>
    </VStack>
    <HStack>
      <Body>Receive notifications about upcoming events and deals</Body>
      <Switch value={true} />
    </HStack>
    <Button>Send</Button>
  </VStack>	
</VStack>
SpiroKit screen examples

We ❤️ Expo

Getting started

Create a new app in seconds using our Expo templates

1Get your license (Pay once, unlimited use)

2Follow these steps to create your new project

# 1. Create a new project
# js template
expo init my-app --template @spirokit/expo-template
# typescript template
expo init my-app --template @spirokit/expo-template-typescript

# 2. Add your SpiroKit copy
yarn add ./spirokit-core-[version].tgz

# 3. Run your app
npm start
spirokit + expo template

🎨 Themeable

Your app, your brand

Choose between 17 built-in color palettes

Add your custom color palettes and fonts

Apply your theme globally with the SpiroKitProvider

import { Button, SpiroKitProvider, useSpiroKitTheme } from "@spirokit/core"
                
const myTheme = useSpiroKitTheme({
  config: {
    colors: {
      primary: "blue"
    }
  }
})

const App = () => {
  return (
    <SpiroKitProvider theme={myTheme}>
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <Box height={48} width="full" backgroundColor={"primary.500"}></Box>
        <Box safeArea position="absolute" flex={1} padding={4} width="full">
          <LargeTitle marginBottom={2} color="white">News</LargeTitle>
          <VStack
            flex={1}
            space={4}
            padding={2}
            borderRadius="lg"
            backgroundColor={useColorModeValue("white", "primaryDark.1")}
          >
            <HorizontalCard
              BadgeComponent={<Badge>Travel</Badge>}
              AssetLeftComponent={
                <Image source={{ uri: "https://i.imgur.com/EflHxyi.png" }}></Image>
              }
              TitleComponent={
                <TitleThree>Emirates introduces digital health verification for UAE passengers</TitleThree>
              }
              DescriptionComponent={
                <Subhead>
                  Emirates and the Dubai Health Authority (DHA) have begun to
                  implement full digital verification of Covid-19 medical records
                </Subhead>
              }
              userName="Kenny Grimes"
              UserAvatarComponent={
                <Avatar source={{ uri: "https://i.imgur.com/mwax0m0.png" }}></Avatar>
              }
              DateComponent={<Footnote>15th June 2021</Footnote>}
            ></HorizontalCard>

            <VerticalCard
              BadgeComponent={<Badge>Travel</Badge>}
              TitleComponent={
                <TitleThree>British Airways app allows economy passengers to order food to seat</TitleThree>
              }
              userName="Antoinette Crona"
              UserAvatarComponent={
                <Avatar source={{ uri: "https://i.imgur.com/8BWJYvV.png" }}></Avatar>
              }
              DateComponent={<Footnote>15th June 2021</Footnote>}
            ></VerticalCard>
            
            <Button IconLeftComponent={BellIcon}>Notify me</Button>
          </VStack>
        </Box>
      </ScrollView>
    </SpiroKitProvider>
  )
}
SpiroKit blue theme applied

🧩️ Extensible

Atomic design for the win

SpiroKit applies the atomic design philosophy, meaning that you can create your own components by mixing and matching the existing ones.

Full access to all the available design tokens (colors, fonts, size scale, etc) using hooks

Unlimited layout options by combining powerful primitives inherited from Native Base (Box, VStack, HStack, Center, etc)

const ShoppingCartItem = (props: { colorMode?: ColorMode }) => {
  return (
    <HStack
      borderRadius={"lg"}
      borderColor={useColorModeValue("primary.500", "primary.300", props.colorMode)}
      backgroundColor={useColorModeValue("white", "primaryDark.4", props.colorMode)}
      padding={4}
      borderRightWidth={8}
    >
      <Image
        source={{
          uri: "/path/to/adidas/tee.png"
        }}
        width={32}
        height={"full"}
        borderRadius="2xl"
      ></Image>
      <VStack paddingX={4} flex={1} space={2}>
        <TitleThree color={useColorModeValue("primaryGray.900", "white", props.colorMode)}>
          "Own the Run" Men's Tee - Adidas
        </TitleThree>
        <Body
          color={useColorModeValue("primaryGray.900", "white", props.colorMode)}
          fontWeight={"bold"}
        >
          Size: Medium
        </Body>
        <LargeTitle
          color={useColorModeValue("primary.500", "primary.300", props.colorMode)}
          fontWeight={"bold"}
        >
          $35
        </LargeTitle>
        <HStack space={4} alignItems="center">
          <Button
            colorMode={props.colorMode}
            size="sm"
            width={"auto"}
            IconLeftComponent={MinusIcon}
          ></Button>
          <TitleThree
            fontWeight={"bold"}
            color={useColorModeValue("primaryGray.900", "white", props.colorMode)}
          >
            1
          </TitleThree>
          <Button
            colorMode={props.colorMode}
            width={"auto"}
            size="sm"
            IconLeftComponent={PlusIcon}
          ></Button>
        </HStack>
      </VStack>
    </HStack>
  )
}
SpiroKit custom component example

📗 Document-Driven

Interactive Storybook docs, with everything you need to know

Get access to a comprehensive and interactive documentation portal that includes:

1Installation guide

2Theming tutorials

3Design tokens reference

4Tons of working examples for every component, ready to copy paste.

5Full page examples Coming soon

6Full app examples Coming soon

Documentation center

🌙

Dark mode baked into each component

SpiroKit allows you to set a color mode (light/dark) based on your users preferences. You can also use the useTheme hook to toggle between light and dark when and where you want.

Choose between light / dark mode using the SpiroKitProvider configuration to apply your preference globally

Automatically adapt your app based on your user’s device mode

Override the color mode per component

const myTheme = useSpiroKitTheme({
  config: {
    initialColorMode: "dark" // Force dark mode globally
  }
})

const App = () => {
  return (
    <SpiroKitProvider theme={myTheme}>
      ...
    </SpiroKitProvider>
  )
}
SpiroKit dark mode example

⚡️ Save time

Save hundreds of hours with our App templates

Travel app template banner showcase

Get access to our App templates catalog, and start saving hundred of hours of development work by using an App Template as your starting point. Every template includes:

One-liner template starter:

expo init my-app --template @spirokit/travel-app-template-typescript

Entire screens like Home, Search, Sign in, Sign up, Profile, and more to help you ship your idea faster.

Dark mode: All the screens are ready to use in light and dark mode.

Figma UI Kit (Included with the Figma and Bundle licenses)

Navigation: We use react-navigation to implement common patterns like bottom tab and stack navigation

❤️️

What our users say

🔨 Development experience

Editor tools

SpiroKit heavily relies on declaration files (d.ts files) to provide you with great IntelliSense for every built-in design token.

This includes things like:

Color palettes

Sizes (used for width, height, etc)

Fonts (line height, letter spacing, font weight, etc)

SpiroKit Snippets for VSCode Coming soon

We are working on a new VSCode extension that will allow you to quickly scaffold complex components to further improve your development workflow.

Pricing

🎨 Designer

Spiro kit logo with React Native logo

$59

SpiroKit for Figma

Buy
  • Hundreds of building blocks
  • Color palette
  • Typography scales
  • Spacing rules
  • Dozens of pre-built screens
  • Dark mode support
  • Icons

⭐️ Popular

Spiro kit logo with React Native logo

$139

SpiroKit Bundle: Figma + React Native

Buy

SpiroKit for Figma

  • Everything you need to prototype and build your next app.
  • Hundreds of building blocks
  • Color palette
  • Typography scales
  • Spacing rules
  • Dozens of pre-built screens
  • Dark mode support
  • Icons

SpiroKit for React Native

  • Customizable and production-ready components
  • Theme provider with 17 color palettes
  • Dark mode support
  • Accessible components built on top of React Native ARIA
  • Built using TypeScript
  • Expo templates
  • Interactive documentation using Storybook
  • Custom hooks for theming and extensibility
  • Coming soon

    Example App boilerplates
  • Coming soon

    Full page examples

👨‍💻 Developer

Spiro kit logo with React Native logo

$99

SpiroKit for React Native

Buy
  • Customizable and production-ready components
  • Theme provider with 17 color palettes
  • Dark mode support
  • Accessible components built on top of React Native ARIA
  • Built using TypeScript
  • Expo templates
  • Interactive documentation using Storybook
  • Custom hooks for theming and extensibility
  • Coming soon

    Example App boilerplates
  • Coming soon

    Full page examples