228
Get started

Mobile interfaces, ready to ship.

Prebuilt design elements and pages, instantly accessible through Claude Code, Cursor, and Codex.

ButtonsSheetsHeadersPagesFieldsLists
SettingsTurn notifications offEdit profileLog out
Selected Button State
const selectedButton = {
  paddingVertical: 12,\n  paddingHorizontal: 18,\n  borderRadius: 999,\n  backgroundColor: "#E09EFF",\n  color: "#202120",\n  fontWeight: "600"
};
Get this code
Bottom Navigation Menu
import { Pressable, Text, View } from "react-native";

const tabs = ["Home", "Chat", "Payments", "Account"];

export function BottomNav({ active, onChange }) {
  return (
    <View style={styles.bar}>
      {tabs.map((tab) => (
        <Pressable key={tab} onPress={() => onChange(tab)}>
          <Text style={tab === active && styles.active}>{tab}</Text>
        </Pressable>
      ))}
    </View>
  );
}
Get this code

A catalog built for shipping.

Turn any app into a world class product with thousands of premium elements and pages, with SwiftUI, Kotlin, React Native, and Dart available for every element.

2500+Premium mobile elements
500+Prebuilt pages
MCP & CLIDirect access to code

Spend less time and tokens
getting mobile UI right.

Browse the catalog

Every element reviewed and signed off on a device, by a human.

See Buttons
Get startedGet startedGet startedGet startedGet startedGet started

Frequently Asked Questions

What is 228.dev?

228.dev is a catalog of polished mobile elements and pages you can browse, preview, and bring into the app you are building.

What source can I install today?

Every element and page comes with production-ready code for all four major mobile frameworks: SwiftUI, Kotlin, React Native, and Dart. Pick the design you want, install it in the language your app already uses, and ship a polished screen the same day.

What is included on the free plan?

The free plan gives you a useful starting set of basic elements and pages to explore, save, and use in your projects.

What do paid plans include?

Paid plans open more of the catalog and include more monthly credits, so you can keep building across more screens and projects.

Where can I use 228.dev?

Find elements and pages in the catalog, save the ones you like, then get the code directly in Cursor, Claude Code, or Codex through the 228.dev MCP server.

How does the catalog workflow work?

Browse and save the designs that suit your app, then approve an MCP source transaction when you are ready to build.

Does 228.dev provide code for mobile UI?

Yes. Browse elements and pages in the 228.dev catalog, then use the 228.dev MCP server to access the code directly through your coding agent.

See plans

228.dev does not use Google APIs for AI-generated non-consensual intimate imagery. Terms · Privacy