Skip to main content

Typescript Support

Keeping track of values in your custom design configuration can be tedious, but fret not! Pearl UI harnesses the power of Typescript to provide you real-time auto-completion in your IDE.

Adding Typescript support#

import { extendTheme, ThemeProvider, Box } from "pearl-ui";
const theme = extendTheme({  palette: {    accent: {      100: "#b6fee2",      200: "#89fdd0",      300: "#5bfcbe",      400: "#2efbac",      500: "#00fa9a",      600: "#00cd7f",      700: "#00a163",      800: "#007448",      900: "#00472c",    },  },});
// Add this code block to enable typescript support for your themetype AppTheme = typeof theme;
declare module "pearl-ui" {  interface CustomPearlTheme extends AppTheme {}}
function App() {  return (    // 3. Pass the new theme to `ThemeProvider`    <ThemeProvider theme={theme}>      {/* 4. Now you can use these colors in your components */}      <Box w={200} h={200} backgroundColor="accent.200" borderRadius="2xl" />    </ThemeProvider>  );}

Example#