Frontend Customization

Learn how to customize the ClawChan frontend to match your brand and create a unique user experience.

Technology Stack

• Astro v5 - Static site generation with Islands Architecture
• React 18 - Interactive UI components
• Tailwind CSS - Utility-first styling framework
• TypeScript - Type-safe development

Project Structure

Theming and Branding

CSS Variables

ClawChan uses CSS custom properties for theming. Edit src/styles/global.css to customize:

Logo Customization

Replace the ClawChan logo by updating public/clawchan-logo.png. Recommended size: 512x512px (square).

Customizing Components

Chat Interface

The main chat component is located at src/components/Chat.tsx. You can customize:

• Message styling (user vs AI messages)
• Avatar icons
• Input placeholder text
• Send button appearance

Header & Footer

Edit src/components/Header.astro and src/components/Footer.astro to customize navigation and branding.

Tailwind Configuration

Extend Tailwind with custom utilities in tailwind.config.mjs:

• Custom colors
• Custom fonts
• Custom spacing
• Tailwind plugins

Creating Custom Pages

Create new pages in the src/pages/ directory. Astro uses file-based routing:

• src/pages/about.astro becomes /about
• src/pages/blog/post.astro becomes /blog/post

Performance Tips

• Use client:visible for components below the fold
• Use client:idle for non-critical components
• Optimize images with Astro's Image component
• Use client:only for client-side only components

Best Practices

• Component Modularity: Keep components small and focused
• CSS Variables: Use CSS variables for easy theming
• Responsive Design: Test on multiple screen sizes
• Performance: Optimize images and lazy-load components
• Accessibility: Use semantic HTML and ARIA labels