CraftReactNativeCraftReactNative

Border Radius

Border radius tokens for consistent rounded corners.

View theme source

BorderRadius Preview

Light Teal
Dark Teal
Light Orange
Dark Orange

BorderRadius Values

xsmall4px
small8px
medium12px
large16px
xlarge24px
xxlarge32px
full999px

Available tokens

  • xsmall: 4px
  • small: 8px
  • medium: 12px
  • large: 16px
  • xlarge: 24px
  • xxlarge: 32px
  • full: 999px

Usage

import { StyleSheet } from 'react-native-unistyles';
 
const styles = StyleSheet.create(theme => ({
  card: {
    borderRadius: theme.borderRadius.medium,
  },
  button: {
    borderRadius: theme.borderRadius.small,
  },
  pill: {
    borderRadius: theme.borderRadius.full,
  },
}));

Spacing

Spacing tokens for consistent padding, margins, and gaps.

Accessibility

Accessibility features and implementations in CraftReactNative components.

On this page