Build consistent cross-platform mobile apps with speed
Pearl UI is a powerful UI toolkit that helps you build beautiful production-ready mobile apps right out of the box. Skip the designer, write cleaner code, and get your product to market faster!
Fully Themeable
Harness the power of design systems
Design systems make it easy to scale your user interface and increase visual consistency. Pearl UI allows you define all aspects of a typical design system during development, giving you the power to update the entire look and feel of your app in minutes!
const palette = {neutral: {50: "#FFFFFF",100: "#F7F9FC",200: "#EDF1F7",300: "#E4E9F2",400: "#C5CEE0",500: "#8F9BB3",600: "#58617A",700: "#2E3A59",800: "#222B45",900: "#1A2138",},primary: {50: "#F0F2FF",100: "#E1E6FF",200: "#C3CCFF",300: "#A5B1FF",400: "#8F9DFF",500: "#6A7BFF",600: "#4D5BDB",700: "#3541B7",800: "#212A93",900: "#141B7A",},secondary: {50: "#FFF1F4",100: "#FFE1E7",200: "#FFC3D6",300: "#FFA5CB",400: "#FF8FC9",500: "#FF6AC6",600: "#DB4DB3",700: "#B7359F",800: "#93218A",900: "#78147A",},...}
const palette = {neutral: {50: "#FFFFFF",100: "#F7F9FC",200: "#EDF1F7",300: "#E4E9F2",400: "#C5CEE0",500: "#8F9BB3",600: "#58617A",700: "#2E3A59",800: "#222B45",900: "#1A2138",},primary: {50: "#F0F2FF",100: "#E1E6FF",200: "#C3CCFF",300: "#A5B1FF",400: "#8F9DFF",500: "#6A7BFF",600: "#4D5BDB",700: "#3541B7",800: "#212A93",900: "#141B7A",},secondary: {50: "#FFF1F4",100: "#FFE1E7",200: "#FFC3D6",300: "#FFA5CB",400: "#FF8FC9",500: "#FF6AC6",600: "#DB4DB3",700: "#B7359F",800: "#93218A",900: "#78147A",},...}
const fontSizes = {"2xs": 10,xs: 12,..."11xl": 40,"12xl": 42,};const lineHeights = {"2xs": 14,xs: 16,..."11xl": 44,"12xl": 46,};const fontWeights = {hairline: "100",thin: "200",light: "300",normal: "400",medium: "500",semibold: "600",bold: "700",extrabold: "800",black: "900",}
const fontSizes = {"2xs": 10,xs: 12,..."11xl": 40,"12xl": 42,};const lineHeights = {"2xs": 14,xs: 16,..."11xl": 44,"12xl": 46,};const fontWeights = {hairline: "100",thin: "200",light: "300",normal: "400",medium: "500",semibold: "600",bold: "700",extrabold: "800",black: "900",}
const spacing = {hairline: 2,"2xs": 4,xs: 8,s: 12,m: 16,l: 24,xl: 32,"2xl": 40,"3xl": 48,"4xl": 56,"5xl": 64,"6xl": 72,"7xl": 80,"8xl": 88,"9xl": 96,}
const spacing = {hairline: 2,"2xs": 4,xs: 8,s: 12,m: 16,l: 24,xl: 32,"2xl": 40,"3xl": 48,"4xl": 56,"5xl": 64,"6xl": 72,"7xl": 80,"8xl": 88,"9xl": 96,}
const elevation = {xs: {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 2,},shadowOpacity: 0.08,shadowRadius: 2,elevation: 2,},s: {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 4,},shadowOpacity: 0.08,shadowRadius: 4,elevation: 4,},..."3xl": {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 24,},shadowOpacity: 0.1,shadowRadius: 24,elevation: 24,},"4xl": {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 28,},shadowOpacity: 0.16,shadowRadius: 28,elevation: 28,},}
const elevation = {xs: {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 2,},shadowOpacity: 0.08,shadowRadius: 2,elevation: 2,},s: {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 4,},shadowOpacity: 0.08,shadowRadius: 4,elevation: 4,},..."3xl": {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 24,},shadowOpacity: 0.1,shadowRadius: 24,elevation: 24,},"4xl": {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 28,},shadowOpacity: 0.16,shadowRadius: 28,elevation: 28,},}
Dark Mode
Dark mode made easy
Design systems make it easy to scale your user interface and increase visual consistency. Pearl UI allows you define all aspects of a typical design system during development, giving you the power to update the entire look and feel of your app in minutes!