Build your mobile applications React Native with blocks

An open-source library that focuses on the developer experience, offering complete control over style and customization in their projects.

Get Started

npm i @design-blocks/native@beta

It’s important to note that this library is not a UI Kit.

The library it provides low-level functionality for developers who either want full control of styling in their projects.

Build apps intuitively, with no steep learning curve. Our goal is to fast-track your next app to production.

At Design Blocks, we aim to make our blocks the key for quick app assembly, while always preserving the unique essence and personality of each project.

It’s also worth mentioning that with design blocks you can create your design system.

Enjoy Creating

"Design Blocks" enables rapid creation of user interfaces, leading to an excellent development experience.

IOS

Android

1import {createBlocks, createTokens} from '@design-blocks/native';
2import colors from '@design-blocks/colors/tailwind-css';
3
4export const lightTheme = {
5  tokens: {
6    colors: {
7      text: {
8        primary: colors.neutral[950],
9        secondary: colors.neutral[600],
10        link: colors.red[500],
11        error: colors.red[600],
12        success: colors.green[600],
13        info: colors.blue[600],
14        warning: colors.yellow[600],
15      },
16      bgColorDisabledPrimary: colors.neutral[300],
17      colorDisabledPrimary: colors.neutral[500],
18      backgroundColorDefault: '#ffffff',
19      ...colors,
20    },
21  },
22} as const;
23
24export const darkTheme = {
25  tokens: {
26    colors: {
27      text: {
28        primary: colors.neutral[950],
29        secondary: colors.neutral[600],
30        link: colors.red[500],
31        error: colors.red[600],
32        success: colors.green[600],
33        info: colors.blue[600],
34        warning: colors.yellow[600],
35      },
36      bgColorDisabledPrimary: colors.neutral[300],
37      colorDisabledPrimary: colors.neutral[500],
38      backgroundColorDefault: colors.blue[600],
39      ...colors,
40    },
41  },
42} as const;
43
44const [lightThemeTokens] = createTokens({theme: lightTheme});
45const [darkThemeTokens] = createTokens({theme: darkTheme});
46
47export const {themes, block, css} = createBlocks({
48  themes: {light: lightThemeTokens, dark: darkThemeTokens},
49});