Getting Started

Atheros AI Coding Studio lets you browse, generate, and customize production-ready UI components with AI — token-driven, accessible, and ready to drop into your project.

1. Browse the gallery

Head to Explore to browse components across 20+ categories (dashboards, charts, chat, auth, pricing, and more) and multiple frameworks. Use search, category filters, and framework filters to narrow things down. Every component has a live preview, and free components include full source code — copying it requires no account (premium components need Atheros AI Pass or Ultra).

2. Clone and modify with AI

Found something close to what you need? Click Clone & Modify with AI to get your own copy in the workspace, where you can edit code directly or describe changes in plain language and let AI apply them.

3. Create from scratch

Go to Dashboard → Create, describe the component you want, pick a framework (React + Tailwind, React + CSS Modules, or Vanilla JS) and optionally a design system, and the AI generates a complete, multi-file component with design tokens, dark mode, and responsive styles.

Plans

The Free plan includes 30 credits a month — up to 10 AI generations a day — using Gemini 3.5 Flash-Lite, subject to the shared free-tier quota. Paid plans unlock premium models (Claude, GPT, Gemini Pro) and more credits — see Pricing or the Credits & Billing section below.