127+ Primitives
Minimal Auth Card
InputsClean and minimal authentication card featuring animated Sign In and Sign Up tab switching, Google, Apple, and GitHub OAuth buttons, and password strength validation.
AuthenticationOAuth ReadyFramer MotionForms
Welcome to BoseUI
Welcome back to your workspace
or email
Don't have an account yet?
256-bit End-to-End SSL Encryption
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/minimal-auth-card.json"
Props
TypeScript props supported by <MinimalAuthCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultMode | "signin" | "signup" | "signin" | Initial authentication mode shown when the card renders. |
| brandName | string | "Pulse" | Product or organization name displayed in the card header. |
| tagline | string | "Welcome back to your workspace" | Welcoming descriptive message beneath the brand header. |
| logo | ReactNode | undefined | Custom logo or icon component rendered at the top of the card. |
| onSubmit | (data: AuthFormData) => void | undefined | Callback fired with form values when authentication is submitted. |
| onOAuthClick | (provider: OAuthProvider) => void | undefined | Callback fired when Google, Apple, or GitHub button is clicked. |
| onModeChange | (mode: AuthMode) => void | undefined | Callback triggered whenever the user switches between Sign In and Sign Up. |
| onForgotPassword | () => void | undefined | Callback triggered when the 'Forgot password?' link is clicked. |
| className | string | undefined | Additional Tailwind CSS classes merged onto the card container. |
Key Features
- Seamless animated segmented tab switching between Sign In and Sign Up modes with layoutId spring physics.
- Integrated OAuth buttons with official SVG logos for Google, Apple, and GitHub.
- Interactive password visibility toggling and real-time 4-stage password strength scoring.
- Accessible form validation with remember me and terms agreement controls.
- Complete dark and light theme support with subtle ambient lighting and micro-border styling.
Keyboard & Accessibility
- Semantic form elements with associated labels and unique generated IDs.
- Full keyboard navigation and visible focus rings across inputs and action buttons.
- Honors prefers-reduced-motion by bypassing layout spring transitions during mode switches.