Skip to content

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

Notifications You must be signed in to change notification settings

openkitrun/design-blocks

Repository files navigation

design-blocks

Build your mobile applications React Native with blocks

An open source library with tools for creating dynamic user interfaces for applications written in React Native, focused on the developer experience.

You can use these components as the base layer of your design system or adopt them incrementally.

Packages


Documentation

For detailed information and usage instructions, visit our official documentation. (Work in Progress)

Installation

To integrate Design Blocks into your project, you can install the package using your preferred package manager. Choose one of the following commands:

// with pnpm
pnpm add @design-blocks/native@beta

// with yarn
yarn add @design-blocks/native@beta

// with npm
npm add @design-blocks/native@beta

// with bun
bun add @design-blocks/native@beta

Configuring Design Blocks

Creating Your Configuration File

``To configure Design Blocks, create a blocks.config.ts file (.js works too) and importcreateBlocksand`createTokens`functions from`@design-blocks/native`.

// blocks.config.ts
import { createTokens, createBlocks } from "@design-blocks/native";

The createTokens function receives a configuration object:

  • theme: defines the tokens for your theme, mapping to CSS properties and style props.
  • utils: creates custom utilities to enhance your development experience.

And returns an array with the following:

  • theme: at position 0 of the array is the theme with tokens generated by createTokens.
  • utils: at position 1 of the array are the utils generated by createTokens.

The createBlocks function receives a configuration object:

  • themes: or it can receive an object with multiple themes generated by createTokens.

And returns all the available functions:

  • block: Facilitates creating styled React-Native components.
  • themes: The themes object is passed to the ThemeProvider, allowing the use of multiple themes.
  • utils: Create custom utils to improve your developer experience.
  • css: Facilitates string interpolation for writing CSS in a readable manner.
// blocks.config.ts

import { createTokens, createBlocks } from "@design-blocks/native";

const [themeTokens] = createTokens({
  theme: {
    tokens: {
      colors: {
        text: {
          primary: "#000",
          secondary: "#fff",
        },
        red: {
          100: "#FFEEEE",
          200: "#FACDCD",
          ...
        },
      },
    },
    extendTokens: {
      spacings: {
        "7xl": 76,
      },
      radii: {
        "6xl": 32,
      },
      fontSizes: {
        "10xl": 80,
      },
    },
  },
  utils: {
    toPixels: (value: number) => `${value}px`,
    ...
  },
});

export const { block, css, themes } = createBlocks({
  themes: {
    light: themeTokens,
  },
});

Using Your Configuration File

From this point onwards, you'll be importing block and other functions from blocks.config.

// App.tsx index root application react-native

import React from "react";

import { ThemeProvider } from "@design-blocks/native";

import RootNavigator from "./RootNavigation";
import { themes } from "./blocks.config";

const App = () => {
  return (
    <ThemeProvider theme={themes.light}>
      <RootNavigator />
    </ThemeProvider>
  );
};

export default App;
import { block } from "[path-to]/blocks.config";

const Description = block.Text(({ theme }) => ({
  color: theme.colors.violet[400],
  fontSize: 30,
}));

Contributing

Please follow our contributing guidelines.

Authors

es probable que ya lo hayas usado en una de estas aplicaciones:

Who is using Design Blocks?