Custom Styling & Theming
Customize AuthCore components to match your brand with CSS variables, Tailwind config, and component props.
Styling Methods
CSS Variables
Global theme customization with CSS custom properties
Tailwind Config
Extend Tailwind theme with your brand colors
Component Props
Per-component styling with className props
Method 1: CSS Variables
Define custom colors in your global CSS file. AuthCore components use these CSS variables internally.
Method 2: Tailwind Configuration
Extend Tailwind's default theme with your brand colors. AuthCore components will automatically use these.
Method 3: Component Props
Override styles on individual components using the className prop.
Complete Brand Example
Dark Mode Support
Custom Component Wrapper
Create wrapper components that apply your brand styles consistently across all auth components.
Available className Props
| Component | Props |
|---|---|
| AuthForm | className, inputClassName, buttonClassName |
| UserProfile | className, tabClassName |
| SecuritySettings | className, cardClassName |
| OrganizationSwitcher | className, dropdownClassName |
| PrimaryButton | className, variant |
| TextInput | className, inputClassName, labelClassName |