Skip to content

Latest commit

 

History

History
98 lines (68 loc) · 1.87 KB

README.md

File metadata and controls

98 lines (68 loc) · 1.87 KB
Raw

@solidauth/ui

A modern, customizable authentication UI component library for SolidStart applications. Provides ready-to-use login and signup forms with both light and dark themes.

Features

  • 🎨 Light and Dark themes
  • 📱 Responsive design
  • 🔒 Password visibility toggle
  • 🚀 Google OAuth integration ready
  • 💅 Modern, minimal aesthetic
  • 🎯 SolidStart optimized

Installation

npm install @solidauth/ui @solidjs/router

Usage

Import and use the components in your SolidStart application:

import { LoginFormLight, SignUpFormLight } from '@solidauth/ui';
// or
import { LoginFormDark, SignUpFormDark } from '@solidauth/ui';

// In your component:
export default function AuthPage() {
  return (
    <LoginFormLight /> // or LoginFormDark
    // or
    <SignUpFormLight /> // or SignUpFormDark
  );
}

Components

Login Forms

  • LoginFormLight - Light theme login form
  • LoginFormDark - Dark theme login form

Features:

  • Username/email input
  • Password input with visibility toggle
  • Login button
  • Google OAuth button
  • Custom logo placement

Sign Up Forms

  • SignUpFormLight - Light theme signup form
  • SignUpFormDark - Dark theme signup form

Features:

  • Username/email input
  • Password input with visibility toggle
  • Sign up button
  • Google OAuth button
  • Custom logo placement

Customization

The components use CSS modules and can be customized by overriding the default classes. Each component has its own CSS file with well-documented class names.

Common customizable elements:

.loginBox {
  /* Customize form container */
}

.log-in-button {
  /* Customize primary button */
}

.google-button {
  /* Customize OAuth button */
}

Dependencies

  • solid-js: ^1.8.22
  • @solidjs/router: ^0.14.7 (peer dependency)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT