Design tokens | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Design tokens
Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms.
Let's take an example by defining a space and color design token.
Copy
const colors = {
primary: {
50: '#ecfeff',
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#0e7490',
800: '#155e75',
900: '#164e63',
},
};
Copy
export const spacing = {
px: 1,
1: 4,
2: 8,
3: 12,
4: 16,
5: 20,
6: 24,
7: 28,
8: 32,
9: 36,
10: 40,
12: 48,
16: 64,
20: 80,
24: 96,
32: 128,
40: 160,
48: 192,
56: 224,
64: 256,
72: 288,
80: 320,
96: 384,
};
We can use the above tokens in our code instead of using absolute values.
Copy
<Box mt={4} bg="primary.500"></Box>
The above Box will be translated to
Copy
<View style={{ marginTop: 16, backgroundColor: 'cyan.500' }} />
With NativeBase, you can create your own design system. NativeBase follows the to construct design systems.
Checkout the and how to customize it .
Nativebase logo
MadeWithNativeBase