BrikUI is a powerful, easy-to-use Tailwind CSS-inspired UI library for React Native, built on top of NativeWind. It allows developers to build beautiful, responsive, and performant mobile interfaces with minimal effort.

• Tailwind CSS Support: Fully compatible with the Tailwind CSS utility class system via NativeWind.
• Customizable Components: Pre-built, customizable components to accelerate your development process.
• Performance-Optimized: Designed to work seamlessly on iOS and Android with minimal overhead.
• Accessibility-First: Built-in accessibility support to ensure inclusivity in your apps.

To get started with BrikUI, install the core package:

npm install brikui

or

yarn add brikui

Ensure that you have the required peer dependencies installed:

• React >= 17
• React Native >= 0.68
• NativeWind >= 4.0

Install these dependencies if they are not already part of your project:

npm install react react-native nativewind

or

yarn add react react-native nativewind

1. Tailwind Configuration: Create or update your tailwind.config.js file:

   module.exports = {
     content: [
       './App.{js,jsx,ts,tsx}',
       './src/**/*.{js,jsx,ts,tsx}',
       './node_modules/@brikui/**/*.{js,jsx,ts,tsx}',
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };

2. NativeWind Setup: Follow the NativeWind setup instructions here.

3. Import BrikUI Components: Start using pre-built components in your project by importing them from brikui:

   import { Button, Card, Input } from 'brikui';

Here’s a quick example to demonstrate the power of BrikUI:

import React from 'react';
import { View } from 'react-native';
import { Button, Card, Input, alert } from 'brikui';

const App = () => {
  return (
    <View className="flex-1 justify-center items-center bg-gray-100">
      <Card className="w-80 p-4">
        <Input placeholder="Enter your name" className="mb-4" />
        <Button
          className="bg-blue-500 text-white"
          onPress={() =>
            alert({
              title: 'Hello, BrikUI!',
            })
          }
        >
          Click Me
        </Button>
      </Card>
    </View>
  );
};

export default App;

Find comprehensive documentation, including component APIs and examples, on the BrikUI Documentation Site.

• Expand the library with more pre-built components.
• Add support for dark mode out of the box.
• Improve documentation with advanced use cases.

BrikUI is licensed under the MIT License.

Developed with ❤️ by the Atomicle Labs team.