saas-factory-ui-minimal

v0.1.0

Published

17 days ago

Clean, minimalist design system for SaaS applications

Downloads

136

0High
0Medium
0Low

theartificialdev

ui design-system components minimal next.js react tailwindcss

@saas-factory/ui-minimal

A clean, whitespace-heavy, modern minimal design system for SaaS applications. Built with Next.js, React, and Tailwind CSS with carefully crafted components and layouts.

Design Philosophy

Minimalist: Less is more. Clean whitespace and simple forms.
San Francisco Modern: Inspired by modern tech company aesthetics.
Accessible: WCAG 2.1 AA compliant by default.
Responsive: Mobile-first approach with perfect scaling.
Glassmorphism: Subtle frosted glass effects for depth.
Performance: Optimized for Core Web Vitals.

Features

✅ Pre-built Components (50+ ready-to-use) ✅ Complete Dashboard Templates (main, analytics, settings) ✅ Marketing Pages (landing, pricing, features) ✅ Authentication Flows (sign in, sign up, password reset) ✅ Dark/Light Mode (toggle included) ✅ Fully Typed (TypeScript everywhere) ✅ Customizable (Tailwind config with CSS variables) ✅ Storybook (interactive component documentation) ✅ Icons (integrated Heroicons) ✅ Forms (validation helpers included)

Installation

npm install @saas-factory/ui-minimal @saas-factory/auth
# or
pnpm add @saas-factory/ui-minimal @saas-factory/auth

Quick Start

1. Add to Layout

// app/layout.tsx
import { UIProvider } from '@saas-factory/ui-minimal';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <UIProvider>{children}</UIProvider>
      </body>
    </html>
  );
}

2. Use Components

import { Button, Card, Container } from '@saas-factory/ui-minimal';

export default function Page() {
  return (
    <Container className="py-12">
      <Card>
        <Card.Header>
          <Card.Title>Welcome</Card.Title>
          <Card.Description>Get started with our platform</Card.Description>
        </Card.Header>
        <Card.Body>
          <p>Your content here</p>
        </Card.Body>
        <Card.Footer>
          <Button>Get Started</Button>
        </Card.Footer>
      </Card>
    </Container>
  );
}

3. Use Dashboard Template

import { DashboardLayout } from '@saas-factory/ui-minimal/templates';

export default function DashboardPage() {
  return (
    <DashboardLayout>
      <h1>Your Dashboard</h1>
      {/* Your content */}
    </DashboardLayout>
  );
}

Component Library

Layout Components

Container - Full-width container with max-width
Grid - CSS Grid wrapper
Stack - Flexbox column/row
Navbar - Top navigation bar
Sidebar - Left navigation panel
Footer - Footer section

Content Components

Card - Content card with sections
Alert - Dismissible alerts
Badge - Status badges
Tooltip - Hover tooltips
Tabs - Tab navigation
Accordion - Collapsible sections
Breadcrumbs - Navigation breadcrumbs

Form Components

Input - Text input with validation
Textarea - Multi-line text input
Select - Dropdown select
Checkbox - Checkbox with label
Radio - Radio button group
Toggle - Toggle switch
FileUpload - File input with preview
FormGroup - Form field wrapper

Button Components

Button - Primary action button
SecondaryButton - Secondary action button
IconButton - Button with icon only
ButtonGroup - Related buttons together

Data Components

Table - Data table with sorting/pagination
Pagination - Pagination controls
DataGrid - Advanced data grid
Skeleton - Loading skeleton

Modal Components

Modal - Dialog modal
Drawer - Side drawer
Dialog - Alert dialog
Popover - Content popover

Hooks

// Theme management
const { theme, toggleTheme } = useTheme();

// Modal control
const { open, close, isOpen } = useModal('modalId');

// Form handling
const { values, errors, register, handleSubmit } = useForm(config);

// Notification system
const { showNotification } = useNotification();

Tailwind Configuration

Override theme colors in your tailwind.config.ts:

import { config } from '@saas-factory/ui-minimal/tailwind.config';

export default {
  ...config,
  theme: {
    extend: {
      colors: {
        primary: '#0066FF', // Your brand color
      },
    },
  },
};

CSS Variables

Customize colors and spacing via CSS variables:

:root {
  --color-primary: #0066FF;
  --color-secondary: #666666;
  --color-success: #00C853;
  --color-error: #FF3B30;
  --spacing-unit: 4px;
}

Templates Included

Dashboard Template

Complete admin dashboard with:

Responsive navbar
Collapsible sidebar
Main content area
Right sidebar (optional)
Footer

Marketing Template

Landing page sections:

Hero section
Features showcase
Pricing table
FAQ accordion
CTA section
Footer

Onboarding Template

Multi-step sign up:

Welcome screen
Account creation
Email verification
Profile setup
Final confirmation

Dark Mode

Built-in light/dark mode toggle:

import { useTheme } from '@saas-factory/ui-minimal';

function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <button onClick={toggleTheme}>
      {theme === 'dark' ? '☀️' : '🌙'}
    </button>
  );
}

Icon Integration

Uses Heroicons v2:

import { StarIcon } from '@saas-factory/ui-minimal/icons';

export function Rating() {
  return <StarIcon className="w-5 h-5" />;
}

Storybook

Interactive component development:

npm run storybook

Browse components at http://localhost:6006

Customization Guide

Using CSS Classes

<Card className="bg-blue-50 border-blue-200">
  Custom card
</Card>

Creating Component Variants

import { Button, type ButtonProps } from '@saas-factory/ui-minimal';

interface CustomButtonProps extends ButtonProps {
  gradient?: boolean;
}

export function GradientButton({ gradient, ...props }: CustomButtonProps) {
  return (
    <Button 
      className={gradient ? 'bg-gradient-to-r from-blue-500 to-purple-500' : ''}
      {...props}
    />
  );
}

Extending with Plugins

import { createUIPlugin } from '@saas-factory/ui-minimal';

const myPlugin = createUIPlugin({
  components: {
    // Your custom components
  },
  config: {
    // Theme overrides
  },
});

<UIProvider plugins={[myPlugin]}>
  {children}
</UIProvider>

Performance Tips

Use next/image for images
Lazy load modals and drawers
Memoize components with memo()
Use virtual scrolling for large tables
Debounce search/filter inputs

Accessibility

All components support keyboard navigation
Proper ARIA labels included
Color contrast ratio ≥ 4.5:1
Focus indicators visible
Screen reader tested

Examples

Simple Form

import { Card, Input, Button } from '@saas-factory/ui-minimal';

export function LoginForm() {
  const [email, setEmail] = useState('');
  
  return (
    <Card className="w-full max-w-md">
      <Card.Header>
        <Card.Title>Sign In</Card.Title>
      </Card.Header>
      <Card.Body>
        <Input 
          type="email" 
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </Card.Body>
      <Card.Footer>
        <Button>Sign In</Button>
      </Card.Footer>
    </Card>
  );
}

Data Table

import { Table, TableHeader, TableBody, TableCell } from '@saas-factory/ui-minimal';

export function UserTable({ users }) {
  return (
    <Table>
      <TableHeader>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
        </tr>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <tr key={user.id}>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell>{user.role}</TableCell>
          </tr>
        ))}
      </TableBody>
    </Table>
  );
}

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

Troubleshooting

Styles not applied?

Ensure Tailwind CSS is installed and configured
Check that CSS files are imported in your layout
Clear Next.js cache: rm -rf .next

Component not rendering?

Check props types in documentation
Verify required props are provided
Check browser console for errors

Dark mode not working?

Verify <UIProvider> wraps your app
Check useTheme() hook is in client component (use 'use client')

Contributing

See CONTRIBUTING.md for development guidelines.

License

MIT - See LICENSE in root directory