@digilogiclabs/saas-factory-ui 0.1.0

package/README.md

@@ -0,0 +1,172 @@
+ # @digilogiclabs/saas-factory-ui
+
+A comprehensive UI component library built with React, Tailwind CSS, and Radix UI. This package provides a complete set of accessible, customizable components for building modern web applications.
+
+## Features
+
+- 🎨 Beautifully designed components
+  - Fully customizable with Tailwind CSS
+  - Dark mode support
+  - Responsive by default
+- ♿️ Accessible components built on Radix UI primitives
+- 🌈 Theme customization
+- 📱 Mobile-first design
+- 🔧 TypeScript support
+- 🚀 Zero-runtime CSS with Tailwind
+- 🎯 Small bundle size
+- 📦 Tree-shakeable exports
+
+## Installation
+
+```bash
+npm install @digilogiclabs/saas-factory-ui
+```
+
+## Requirements
+
+- Next.js 13 or higher
+- React 18 or higher
+- Tailwind CSS 3.0 or higher
+
+## Quick Start
+
+1. Setup Tailwind CSS in your project if you haven't already:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+2. Add the component paths to your Tailwind config:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    // ...
+    "./node_modules/@digilogiclabs/saas-factory-ui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  // ...
+}
+```
+
+3. Import and use components in your application:
+
+```tsx
+import { Button, Card, Input } from '@digilogiclabs/saas-factory-ui';
+
+export default function MyComponent() {
+  return (
+    <Card>
+      <Card.Header>
+        <Card.Title>Welcome</Card.Title>
+        <Card.Description>Start building your app</Card.Description>
+      </Card.Header>
+      <Card.Content>
+        <Input placeholder="Enter something..." />
+        <Button>Click me</Button>
+      </Card.Content>
+    </Card>
+  );
+}
+```
+
+## Theming
+
+Enable dark mode and customize your theme:
+
+```tsx
+// app/providers.tsx
+import { ThemeProvider } from '@digilogiclabs/saas-factory-ui';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider defaultTheme="system" storageKey="ui-theme">
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+## Available Components
+
+### Layout Components
+- `Container` - Responsive container
+- `Grid` - Flexible grid system
+- `Section` - Semantic section with spacing
+
+### UI Components
+- `Alert` - Status and notification alerts
+- `Avatar` - User avatars with fallback
+- `Badge` - Status indicators and counts
+- `Button` - Action buttons with variants
+- `Card` - Content containers
+- `Checkbox` - Form checkboxes
+- `Dialog` - Modal dialogs
+- `DropdownMenu` - Menu dropdowns
+- `Form` - Form components and validation
+- `Input` - Text input fields
+- `Label` - Form labels
+- `Modal` - Modal windows
+- `Progress` - Progress indicators
+- `Select` - Dropdown selects
+- `Skeleton` - Loading states
+- `Tabs` - Tabbed interfaces
+- `Toast` - Toast notifications
+
+### Hooks
+- `useMediaQuery` - Responsive hooks
+- `useMounted` - Mount status
+- `useLockBody` - Body scroll lock
+- `useTheme` - Theme management
+
+### Utilities
+- Date formatting
+- Number formatting
+- Form validation
+- Animation helpers
+- DOM utilities
+
+## Customization
+
+Customize component styles using Tailwind classes:
+
+```tsx
+<Button className="bg-custom-500 hover:bg-custom-600">
+  Custom Button
+</Button>
+```
+
+Override default theme variables:
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  /* Add your custom theme variables */
+}
+```
+
+## TypeScript
+
+The package includes full TypeScript support. Import types directly:
+
+```tsx
+import type { ButtonProps } from '@digilogiclabs/saas-factory-ui';
+```
+
+## Best Practices
+
+- Use semantic HTML elements for accessibility
+- Follow mobile-first design principles
+- Maintain consistent spacing using provided layout components
+- Use theme variables for colors and spacing
+- Implement responsive designs using breakpoint utilities
+
+## Contributing
+
+We welcome contributions! Please see our [contributing guide](CONTRIBUTING.md) for details.
+
+## License
+
+MIT © [DigiLogic Labs](https://github.com/DigiLogicLabs)