---
title: "Appearance & CSS Variables"
description: "Customize prebuilt AuthSetu components with CSS variables and Tailwind CSS classes."
order: 1
category: "Customization"
updated: "2026-10-13"
---

# Appearance & CSS Variables

AuthSetu components inherit your application's typography, colors, and layout tokens via standard CSS variables.

## CSS Custom Properties

```css
:root {
  --authsetu-primary: #2563eb;
  --authsetu-primary-foreground: #ffffff;
  --authsetu-background: #09090b;
  --authsetu-card: #18181b;
  --authsetu-border: #27272a;
  --authsetu-radius: 0.75rem;
}
```

## Inline Appearance Overrides

```tsx
<SignIn
  appearance={{
    elements: {
      card: 'shadow-2xl border-primary/20',
      primaryButton: 'bg-emerald-600 hover:bg-emerald-700',
    },
  }}
/>
```