Skip to main content
AnimeThemes Web is built with a comprehensive set of reusable React components using TypeScript, styled-components, and Radix UI primitives.

​
Component Categories

Layout Components

Container, Flex, Row, Column, and Solid components for page structure

Cards

Card, SummaryCard, ThemeDetailCard, and specialized card components

Buttons

Button, IconTextButton, and specialized button variants

Forms

Input, TextArea, Switch, and Slider components with Radix UI integration

Video Player

VideoPlayer with controls, overlay, and volume management

Navigation

Navigation, search navigation, and season/year navigation

​
Architecture

All components are built with:
  • TypeScript for type safety
  • styled-components for styling with CSS-in-JS
  • Radix UI primitives for accessible UI components
  • FontAwesome icons for consistent iconography

​
Component Organization

Components are organized in /src/components/ by feature: 
src/components/
├── box/          # Layout primitives (Flex, Row, Column, Solid)
├── button/       # Button components and variants
├── card/         # Card components
├── container/    # Container wrapper
├── form/         # Form inputs and controls
├── navigation/   # Navigation components
├── video-player/ # Video player components
├── text/         # Text and typography components
└── ...

​
Styling System

Components use CSS custom properties for theming: 
<Row style={{ "--gap": "16px", "--align-items": "center" }}>
  {/* content */}
</Row>

​
GraphQL Integration

Many components include GraphQL fragments for data fetching: 
ThemeDetailCard.fragments = {
  theme: gql`
    fragment ThemeDetailCardTheme on Theme {
      type
      sequence
      song { title }
      // ...
    }
  `
}

Build docs developers (and LLMs) love

Get started for freeTalk to us