@authsome/ui-components provides a library of 40+ production-ready, styled authentication components built on Radix UI primitives and Tailwind CSS. Drop them into your React app for a polished auth experience with minimal effort.
Installation01
npm install @authsome/ui-components @authsome/ui-react @authsome/ui-coreEnsure Tailwind CSS is configured in your project. The components use Tailwind utility classes and CSS variables for theming.
Component catalog02
Auth forms
| Component | Description |
SignInForm | Email/password sign-in with social login support |
SignUpForm | Registration form with name, email, password fields |
ForgotPasswordForm | Request a password reset email |
ResetPasswordForm | Set a new password with reset token |
MagicLinkForm | Passwordless sign-in via email link |
MFAChallengeFormStyled | TOTP or SMS code verification |
ChangePasswordForm | Current/new password form for authenticated users |
Passkey components
| Component | Description |
PasskeyLoginButton | Authenticate with a registered passkey |
PasskeyRegisterButton | Register a new passkey for the account |
PasskeyList | List and manage registered passkeys |
Device and session management
| Component | Description |
SessionList | View and revoke active sessions |
DeviceList | View and manage authorized devices |
DeviceAuthorizationForm | Authorize a new device via code |
User components
| Component | Description |
UserAvatar | User profile picture with fallback initials |
UserButton | Dropdown menu with user info and actions |
UserProfileCard | Display user details in a card layout |
OrgSwitcher | Switch between organizations the user belongs to |
StyledAuthGuard | AuthGuard with built-in loading spinner and sign-in form |
Shared components
| Component | Description |
AuthCard | Consistent card wrapper for auth forms |
SocialButtons | Social provider login buttons (Google, GitHub, etc.) |
PasswordInput | Password field with show/hide toggle |
LoadingSpinner | Animated loading indicator |
ErrorDisplay | Styled error message display |
Primitives
All Radix-based primitives are exported for building custom components:
Button, Card, Input, Label, Alert, Avatar, Badge, Checkbox, Dialog, DropdownMenu, InputOTP, Select, Separator, Sheet, Skeleton, Switch, Tabs, Tooltip
Usage examples03
Sign-in page
import { AuthProvider } from "@authsome/ui-react";
import { SignInForm, AuthCard } from "@authsome/ui-components";
function SignInPage() {
return (
<AuthProvider baseURL="https://api.example.com">
<div className="flex min-h-screen items-center justify-center">
<SignInForm
onSuccess={() => window.location.href = "/dashboard"}
socialProviders={[
{ provider: "google", label: "Google" },
{ provider: "github", label: "GitHub" },
]}
showForgotPassword
signUpHref="/sign-up"
/>
</div>
</AuthProvider>
);
}User profile card
import { UserProfileCard } from "@authsome/ui-components";
import { useUser } from "@authsome/ui-react";
function ProfilePage() {
const { user } = useUser();
return <UserProfileCard user={user} />;
}Organization switcher
import { OrgSwitcher } from "@authsome/ui-components";
function Sidebar() {
return (
<nav>
<OrgSwitcher
onOrgChange={(orgId) => {
console.log("Switched to org:", orgId);
}}
/>
</nav>
);
}Session management
import { SessionList } from "@authsome/ui-components";
function SecuritySettings() {
return (
<div>
<h2>Active Sessions</h2>
<SessionList
onRevoke={(sessionId) => {
console.log("Revoked session:", sessionId);
}}
/>
</div>
);
}Passkey registration
import { PasskeyRegisterButton, PasskeyList } from "@authsome/ui-components";
function PasskeySettings() {
return (
<div>
<h2>Passkeys</h2>
<PasskeyList />
<PasskeyRegisterButton label="Add a passkey" />
</div>
);
}User button with dropdown
import { UserButton } from "@authsome/ui-components";
function Header() {
return (
<header className="flex items-center justify-between p-4">
<h1>My App</h1>
<UserButton />
</header>
);
}Theming and customization04
CSS variables
Components use CSS variables for colors, radii, and spacing. Override them in your global CSS to match your brand:
:root {
--authsome-primary: 220 90% 56%;
--authsome-primary-foreground: 0 0% 100%;
--authsome-background: 0 0% 100%;
--authsome-foreground: 222 47% 11%;
--authsome-muted: 210 40% 96%;
--authsome-muted-foreground: 215 16% 47%;
--authsome-border: 214 32% 91%;
--authsome-radius: 0.5rem;
}Dark mode
Add dark mode variables under a .dark class or data-theme="dark" attribute:
.dark {
--authsome-background: 222 47% 11%;
--authsome-foreground: 210 40% 98%;
--authsome-primary: 217 91% 60%;
--authsome-muted: 217 33% 17%;
--authsome-border: 217 33% 17%;
}className overrides
Every component accepts a className prop for additional Tailwind classes:
<SignInForm className="max-w-md mx-auto shadow-xl" />
<Button className="bg-brand-500 hover:bg-brand-600">Custom Button</Button>Accessibility05
All components follow WAI-ARIA guidelines:
Form inputs have associated
<label>elementsError messages are linked via
aria-describedbyFocus management is handled by Radix UI primitives
Keyboard navigation works across all interactive components (Tab, Enter, Escape)
Loading states are announced to screen readers via
aria-busyColor contrast meets WCAG 2.1 AA standards
Responsive design06
Components are mobile-first and adapt to screen width:
Auth forms stack vertically on small screens
AuthCardadjusts padding for mobile devicesOrgSwitcherandUserButtoncollapse gracefully on narrow viewportsSocial login buttons switch between horizontal and vertical layouts based on available space
TypeScript07
All component props are fully typed and exported:
import type {
SignInFormComponentProps,
SignUpFormComponentProps,
ForgotPasswordFormProps,
ResetPasswordFormProps,
MagicLinkFormProps,
MFAChallengeFormStyledProps,
ChangePasswordFormProps,
PasskeyLoginButtonProps,
PasskeyRegisterButtonProps,
PasskeyListProps,
SessionListProps,
DeviceListProps,
DeviceAuthorizationFormProps,
UserAvatarProps,
UserButtonProps,
UserProfileCardProps,
OrgSwitcherProps,
StyledAuthGuardProps,
AuthCardProps,
SocialButtonsProps,
LoadingSpinnerProps,
ErrorDisplayProps,
} from "@authsome/ui-components";