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: about 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 (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-15T06:07:30.000Z (about 2 months ago)
- Last Synced: 2025-08-22T05:02:14.126Z (about 2 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: 36 MB
- Stars: 14
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
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.
sponsor: Brian Curliss
### Packages
- [🏄♀️ `@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.
#### Future Packages (In Planning)
- [🔥 @design-blocks/primitives] - Layout components (Box, Stack, Text)
## Documentation
For detailed information and usage instructions, visit our [official documentation](https://designblocks.dev). (Work in Progress)
## 📚 Current Package
### **@design-blocks/unstyled**
This package provides essential UI components without style opinions:
- **Form Controls**: Button, Checkbox, RadioGroup, Switch
- **Full Accessibility**: Screen reader support, keyboard navigation, ARIA attributes
- **Composable API**: Inspired by Radix UI's compound component pattern
- **TypeScript**: Complete type safety and excellent IntelliSense
- **Tree-shakeable**: Import only the components you use
```tsx
import { Button, Checkbox, RadioGroup, Switch } from '@design-blocks/unstyled';
```
### 🚀 Quick Start
```bash
npm install @design-blocks/unstyled@beta
```
```tsx
import { Button, Checkbox, RadioGroup } from '@design-blocks/unstyled';
// Button with loading state
Submit
// Checkbox
// RadioGroup
Basic Plan
```
## Contributing
Please follow our [contributing guidelines](./.github/CONTRIBUTING.md).
## Authors
- Jorge Luis Calleja A. ([@wootsbot](https://twitter.com/wootsbot))
⭐ [Estrella en GitHub](https://github.com/openkitrun/design-blocks) • Construido con ❤️ para React Native