Skip to main content

​
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:
ComponentFileDescription
Buttonui/button.tsxPrimary action button with variants
Cardui/card.tsxContent container with header and footer
Inputui/input.tsxText input field
Badgeui/badge.tsxStatus indicators and labels
Avatarui/avatar.tsxUser profile picture with fallback
Alertui/alert.tsxInformational and warning messages
Separatorui/separator.tsxVisual divider
DropdownMenuui/dropdown-menu.tsxMenu 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

ComponentFileDescription
AppShellapp-shell.tsxMain layout with header, navigation, and user dropdown
LoginFormlogin/login-form.tsxLogin form with OAuth buttons and magic link input
UserAvataruser-avatar.tsxUser profile picture with name fallback
OAuthButtonoauth-button.tsxStyled button for OAuth providers
ThemeProvidertheme-provider.tsxDark/light mode context using next-themes
ThemeToggletheme-toggle.tsxSun/moon toggle button for theme switching
Iconsicons.tsxCustom 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