Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/openkitrun/design-blocks
An open-source library that focuses on the developer experience, offering complete control over style and customization in their projects.
https://github.com/openkitrun/design-blocks
components css-in-js design-system dx library native primitives react react-native system tailwind ui unstyled unstyled-components
Last synced: 2 months ago
JSON representation
An open-source library that focuses on the developer experience, offering complete control over style and customization in their projects.
- Host: GitHub
- URL: https://github.com/openkitrun/design-blocks
- Owner: openkitrun
- Created: 2023-02-17T04:37:52.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-06T17:42:19.000Z (about 1 year ago)
- Last Synced: 2024-10-16T07:04:40.251Z (3 months ago)
- Topics: components, css-in-js, design-system, dx, library, native, primitives, react, react-native, system, tailwind, ui, unstyled, unstyled-components
- Language: TypeScript
- Homepage: https://designblocks.dev
- Size: 35.7 MB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
Awesome Lists containing this project
README
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
- [💥 `@design-blocks/native`](https://github.com/openkitrun/design-blocks/tree/main/packages/native) - Core of Design Blocks. Features ThemeProvider, block, and createBlocks for token configuration, essential for UI customization and consistency.
- [🏄♀️ `@design-blocks/primitives`](https://github.com/openkitrun/design-blocks/tree/main/packages/%40blocks-primitives) -
Provides basic components and functions for custom UI creation. Includes elements like Box, Stack, and Text, essential for UI construction.
- [🏄♀️ `@design-blocks/unstyled`](https://github.com/openkitrun/design-blocks/tree/main/packages/%40blocks-unstyled) -
Accessible, style-agnostic components, ideal for integration in any Design Blocks project. Maximizes accessibility and design flexibility.
- [💅 `@design-blocks/colors`](https://github.com/openkitrun/design-blocks/tree/main/packages/%40blocks-colors) - A set of
open-source color systems to design your apps beautiful and accessible.
[Tailwindcss Colors](https://tailwindcss.com/docs/customizing-colors), [Radix Colors](https://www.radix-ui.com/colors)
## Documentation
For detailed information and usage instructions, visit our [official documentation](https://designblocks.dev). (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:
```sh
// 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 import`createBlocks`and`createTokens`functions from`@design-blocks/native`.
```ts
// 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.
```ts
// 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.
```tsx
// 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 (
);
};
export default App;
```
```tsx
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](./.github/CONTRIBUTING.md).
## Authors
- Jorge Luis Calleja A. ([@wootsbot](https://twitter.com/wootsbot))
es probable que ya lo hayas usado en una de estas aplicaciones:
## Who is using Design Blocks?
- .
- [LastPlay](https://www.lastplay.app/)
- [App Store](https://apps.apple.com/us/app/last-play/id1663594431)
- [Google Play](https://play.google.com/store/apps/details?id=com.lastplay)