RadixUI BuildKit

📚 Documentation

• API Documentation - Complete API reference for all exports
• Component Examples - Detailed examples for every component
• GitHub Repository - Source code and contributions
• NPM Package - Package details and versions

✨ 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

# Using npm
npm install radixui-buildkit

# Using yarn
yarn add radixui-buildkit

# Using pnpm
pnpm add radixui-buildkit

Peer Dependencies

Make sure you have the required peer dependencies installed:

yarn add react recoil formik zod

🚀 Quick Start

1. Import the CSS

Add the CSS import to your main application file:

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

2. Wrap with RecoilRoot

For state management features:

import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      {/* Your app content */}
    </RecoilRoot>
  );
}

3. Start Using Components

import { ZButton, ZInput, ZCard } from 'radixui-buildkit';

function MyComponent() {
  return (
    <ZCard className="p-6">
      <ZInput placeholder="Enter your email" type="email" />
      <ZButton variant="solid" className="mt-4">
        Submit
      </ZButton>
    </ZCard>
  );
}

🧩 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:

// Button variants
<ZButton variant="solid">Solid</ZButton>
<ZButton variant="outline">Outline</ZButton>
<ZButton variant="ghost">Ghost</ZButton>
<ZButton variant="soft">Soft</ZButton>

// Sizes
<ZButton size="sm">Small</ZButton>
<ZButton size="md">Medium</ZButton>
<ZButton size="lg">Large</ZButton>

📱 Mobile Support

Built-in Capacitor integration for mobile features:

import { showNotification } from 'radixui-buildkit';

// Native notifications
showNotification({
  title: 'Success',
  message: 'Operation completed',
  type: 'success'
});

🔌 Higher Order Components

Network Detection

import { NetworkDetectHOC } from 'radixui-buildkit';

const MyComponent = NetworkDetectHOC(({ isOnline }) => (
  <div>Status: {isOnline ? 'Online' : 'Offline'}</div>
));

Global Components

import { ZGlobalComponentsHOC } from 'radixui-buildkit';

const App = ZGlobalComponentsHOC(MyApp);

🛠️ Development

Setup

# Clone the repository
git clone https://github.com/aoneahsan/radixui-buildkit.git
cd radixui-buildkit

# Install dependencies
yarn install

# Start development
yarn dev

Available Scripts

yarn dev          # Start development mode
yarn build        # Build the package
yarn test         # Run tests
yarn 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: [email protected]
• 🐛 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:

   {
     "dependencies": {
       "radixui-buildkit": "latest"
     }
   }

2. Update your imports:

   // Old
   import { ZButton } from 'zaions-react-ui-kit';
      
   // New
   import { ZButton } from 'radixui-buildkit';

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