RadixUI BuildKit

✨ Features

• 🎨 78+ Pre-built Components - Buttons, Forms, Modals, Tables, and more
• 🔧 Built on Radix UI - Accessible, unstyled UI primitives
• 📱 Mobile Ready - Capacitor integration for native mobile features
• 🎯 100% TypeScript - Full type safety and IntelliSense support
• 🎭 Multiple Variants - Classic, Solid, Soft, Outline, Ghost styles
• 🧩 Form Management - Formik integration with Zod validation
• 🔄 State Management - Recoil atoms for global state
• 📐 Responsive Design - Mobile-first with Tailwind CSS v4
• 🚀 Tree-shakeable - Only import what you need
• ♿ Accessible - WCAG compliant components

📦 Installation

1# Using npm
2npm install radixui-buildkit
3
4# Using yarn
5yarn add radixui-buildkit
6
7# Using pnpm
8pnpm add radixui-buildkit

Peer Dependencies

Make sure you have the required peer dependencies installed:

1yarn add react recoil formik zod

🚀 Quick Start

1. Import the CSS

Add the CSS import to your main application file:

1import 'radixui-buildkit/dist/index.css';

2. Wrap with RecoilRoot

For state management features:

1import { RecoilRoot } from 'recoil';
2
3function App() {
4  return (
5    <RecoilRoot>
6      {/* Your app content */}
7    </RecoilRoot>
8  );
9}

3. Start Using Components

1import { ZButton, ZInput, ZCard } from 'radixui-buildkit';
2
3function MyComponent() {
4  return (
5    <ZCard className="p-6">
6      <ZInput placeholder="Enter your email" type="email" />
7      <ZButton variant="solid" className="mt-4">
8        Submit
9      </ZButton>
10    </ZCard>
11  );
12}

📚 Documentation

• API Documentation - Complete API reference for all exports
• Component Examples - Detailed examples for every component
• Migration Guide - Upgrading from the previous version

🧩 Component Categories

Form Components

• Input, TextArea, Select, Checkbox, Radio
• Switch, Slider, DatePicker, AmountInput
• Form validation with Zod schemas

UI Elements

• Button, Badge, Avatar, Card
• Dialog, Modal, Popover, Tooltip
• Tabs, Toggle, Accordion, Alert

Layout Components

• Box, Flex, Grid, Container
• ScrollArea, Separator, AspectRatio

Data Display

• Table with sorting/filtering
• Progress bars, Calendar
• DataList, VirtualList

Utility Components

• ErrorBoundary, NetworkDetection
• Loaders, InfiniteScroll
• Typography components

Pre-built Pages

• Login Page
• Register Page
• 404 Not Found Page

🎨 Styling & Variants

Components support multiple style variants:

1// Button variants
2<ZButton variant="solid">Solid</ZButton>
3<ZButton variant="outline">Outline</ZButton>
4<ZButton variant="ghost">Ghost</ZButton>
5<ZButton variant="soft">Soft</ZButton>
6
7// Sizes
8<ZButton size="sm">Small</ZButton>
9<ZButton size="md">Medium</ZButton>
10<ZButton size="lg">Large</ZButton>

📱 Mobile Support

Built-in Capacitor integration for mobile features:

1import { showNotification } from 'radixui-buildkit';
2
3// Native notifications
4showNotification({
5  title: 'Success',
6  message: 'Operation completed',
7  type: 'success'
8});

🔌 Higher Order Components

Network Detection

1import { NetworkDetectHOC } from 'radixui-buildkit';
2
3const MyComponent = NetworkDetectHOC(({ isOnline }) => (
4  <div>Status: {isOnline ? 'Online' : 'Offline'}</div>
5));

Global Components

1import { ZGlobalComponentsHOC } from 'radixui-buildkit';
2
3const App = ZGlobalComponentsHOC(MyApp);

🛠️ Development

Setup

1# Clone the repository
2git clone https://github.com/aoneahsan/radixui-buildkit.git
3cd radixui-buildkit
4
5# Install dependencies
6yarn install
7
8# Start development
9yarn dev

Available Scripts

1yarn dev          # Start development mode
2yarn build        # Build the package
3yarn test         # Run tests
4yarn build:css    # Build CSS only

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © Ahsan Mahmood

🔗 Links

• NPM Package
• GitHub Repository
• Issue Tracker
• Changelog

🙏 Acknowledgments

Built with:

• Radix UI - Unstyled, accessible UI components
• Tailwind CSS - Utility-first CSS framework
• Capacitor - Native mobile bridge
• TypeScript - Type safety

💬 Support

• 📧 Email: aoneahsan@gmail.com
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

Migration from zaions-react-ui-kit

If you're migrating from the previous zaions-react-ui-kit package:

1. Update your package.json:

   1{
   2  "dependencies": {
   3    "radixui-buildkit": "latest"
   4  }
   5}

2. Update your imports:

   1// Old
   2import { ZButton } from 'zaions-react-ui-kit';
   3
   4// New
   5import { ZButton } from 'radixui-buildkit';

3. No API changes - all components maintain the same interfaces!

---