Components

UI component library and patterns

Components

Tracera’s frontend uses shadcn/ui for base components and custom components for application-specific UI.

shadcn/ui Components

Located in components/ui/, these are accessible, unstyled primitives built on Radix UI:

Component	File	Description
Button	ui/button.tsx	Primary action button with variants
Card	ui/card.tsx	Content container with header and footer
Input	ui/input.tsx	Text input field
Badge	ui/badge.tsx	Status indicators and labels
Avatar	ui/avatar.tsx	User profile picture with fallback
Alert	ui/alert.tsx	Informational and warning messages
Separator	ui/separator.tsx	Visual divider
DropdownMenu	ui/dropdown-menu.tsx	Menu with submenus and actions

Customization

shadcn/ui components are configured via components.json:

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css"
  }
}

Components are copied into the project (not installed as a package), so they’re fully customizable.

Application Components

Component	File	Description
AppShell	app-shell.tsx	Main layout with header, navigation, and user dropdown
LoginForm	login/login-form.tsx	Login form with OAuth buttons and magic link input
UserAvatar	user-avatar.tsx	User profile picture with name fallback
OAuthButton	oauth-button.tsx	Styled button for OAuth providers
ThemeProvider	theme-provider.tsx	Dark/light mode context using next-themes
ThemeToggle	theme-toggle.tsx	Sun/moon toggle button for theme switching
Icons	icons.tsx	Custom icon components

Theming

Dark/light mode is managed by next-themes:

// ThemeProvider wraps the app
<ThemeProvider attribute="class" defaultTheme="system">
  {children}
</ThemeProvider>

// ThemeToggle switches between modes
<ThemeToggle />

Tailwind CSS classes use the dark: variant for dark mode styles.

Design System

Tracera uses Tailwind CSS 4 with a consistent design system:

• Colors — Indigo primary with purple accents
• Typography — System font stack
• Spacing — Tailwind’s default spacing scale
• Border Radius — Consistent rounding across components
• Shadows — Subtle elevation for cards and dropdowns