Page Shared UI and Layout System

How layouts work

The application has a consistent structure across all pages:

• Header (navigation, theme toggle, etc.)

• Main content area (where tools render)

• Footer (links, info)

These are in app/components/layout/ and applied globally through app/layout.tsx.

Reusable UI components

Common UI elements live in app/components/ui/. Use these when building tools:

• Buttons, inputs, text areas

• Copy-to-clipboard components

• Error and success messages

• Loaders and spinners

Look at existing tools to see which components are available before creating new ones.

Component patterns

When building a tool component, you can follow this pattern if needed:

Input area → Process → Output area

For example:

• Text converter: input text → convert → show result

• JSON formatter: paste JSON → format → display nicely

• Code minifier: select file/text → minify → download/copy

Reuse existing patterns. Don't reinvent UI elements.

Consistency first

Check how similar tools handle:

• Error states (what happens if input is invalid?)

• Copy functionality (do they have copy buttons?)

• File upload or text input? (be consistent with similar tools)

• Output display (show result inline, in modal, or download?)

Ask in the issue if you're unsure which pattern to follow.