Skip to main content
AniDojo provides a collection of React components for search functionality, navigation, and theming. All components are built with TypeScript and designed for Next.js applications.

​
Component Categories

Search Components

GlobalSearch and AnimeSearch components for discovering anime

Navigation Components

Navbar and AuthNavbar components for site navigation

Theme Components

ThemeToggle and theme system for dark/light mode support

​
Architecture

All components follow these patterns:

​
Client-Side Components

All interactive components use the 'use client' directive for Next.js client-side rendering: 
'use client';

import { useState } from 'react';
// Component implementation

​
TypeScript Interfaces

Components define clear TypeScript interfaces for props and data structures: 
interface ComponentProps {
  className?: string;
  // Additional props
}

​
Accessibility

Components include proper ARIA labels and keyboard navigation:
  • aria-label attributes for icon buttons
  • Keyboard shortcuts (e.g., / for search focus)
  • Focus management for modals and dropdowns

​
Common Patterns

​
Styling

Components use Tailwind CSS with custom theme colors: 
<div className="bg-ink text-cream hover:text-crimson-bright transition-colors">
  Content
</div>

​
State Management

Local state with React hooks for component-specific data: 
const [isOpen, setIsOpen] = useState(false);
const [data, setData] = useState([]);

​
Effects and Cleanup

Proper effect cleanup to prevent memory leaks: 
useEffect(() => {
  const handler = () => { /* ... */ };
  window.addEventListener('event', handler);
  return () => window.removeEventListener('event', handler);
}, []);

​
Import Paths

Components are located in the @/components directory: 
import GlobalSearch from '@/components/GlobalSearch';
import AnimeSearch from '@/components/AnimeSearch';
import Navbar from '@/components/Navbar';
import AuthNavbar from '@/components/AuthNavbar';
import ThemeToggle from '@/components/ThemeToggle';

​
Next Steps

Search

Learn about search components

Navigation

Explore navigation components

Theming

Implement theme switching

Build docs developers (and LLMs) love

Get started for freeTalk to us