Overview
Browse a catalog of 308 ready-to-use interface components across nine platforms: HTML, Tailwind, React, Vue, Flutter, Flutter's Cupertino set, Jetpack Compose, SwiftUI, and React Native. Search and filter by category, preview web components live, and copy the source of any entry.
How It Works
Use the search box to find components by name or description, and narrow with the platform and category filters. Categories cover buttons, forms, pickers, app bars, navigation, cards, overlays, feedback, badges, progress indicators, text, layout, media, data, and effects. Open an entry to see its detail view: web components render in a live preview with a code tab beside them, while mobile-framework entries show their source first. Every entry has a copy button for its code.
Step-by-Step Usage Guide
- Search for a component type, such as a rating bar or segmented control.
- Filter by platform, for example Compose or SwiftUI, to match your stack.
- Open an entry and switch between the live preview and code tabs where available.
- Copy the source and paste it into your project, adapting names and colors.
Technical Specifications & Standards
The catalog is a structured data set built into the page: 308 entries spread across the nine platforms, with Flutter and Jetpack Compose holding the largest collections, and 188 entries carrying extended documentation. Platform determines the preview model. HTML components render in a sandboxed live frame with the site's own base styles; Tailwind components render the same way but with the Tailwind CDN script injected into the frame, a development-only shortcut that is convenient for previews though not the recommended production setup. React and Vue entries show code without live rendering, and the mobile platforms (Flutter, Cupertino, Compose, SwiftUI, React Native) are code-first, with a compact source preview on the card and the full file in the detail view. Search runs across names, descriptions, and tags, and filters combine with it. Each copy button writes the component's complete source with a clipboard fallback for restricted browsers, so the atlas works as a copy-paste reference during implementation rather than a linked dependency.
Targeted Use Cases
- Finding a Compose or SwiftUI implementation of a component you can build in HTML but not on mobile.
- Comparing how the same control is expressed across HTML, React, and Vue.
- Grabbing a quick overlay or progress pattern during a hackathon.
- Building a shared vocabulary with designers by pointing at concrete examples.
Notes & Gotchas
- Filter by your platform first; the catalog mixes nine frameworks and search alone surfaces mixed results.
- Adapt copied code to your theme; entries ship with fixed colors and spacing.
- Remember Tailwind previews load the CDN script, which is a preview convenience, not a production setup.
- Check the platform badge on each entry before copying; mobile code does not translate to web directly.
Frequently Asked Questions
Which platforms does the atlas cover?
Nine: HTML, Tailwind, React, Vue, Flutter, Flutter's Cupertino style, Jetpack Compose, SwiftUI, and React Native. Web platforms get live previews where possible, and mobile platforms are code-first.
Why do some entries show code instead of a preview?
Only HTML and Tailwind entries can render in the sandboxed frame. React and Vue entries display source without a live render, and mobile-framework entries are code-first by nature.
Is the Tailwind preview using a production setup?
No. Tailwind previews inject the CDN script inside the preview frame, which is a development shortcut. For production you should compile Tailwind properly in your project.
How current is the catalog?
It is a built-in data set, so it does not fetch or update itself. Treat entries as solid starting points and adapt them to your current framework versions.