Fast Styles | Fast Styles

Zero Runtime Overhead
Our Babel plugin ensures the fastest runtime implementation possible, even surpassing React Native vanilla.

Variant-focused Design
Full support for variants, compound variants, themes, and tokens.

Enhanced Dev Experience
Effortlessly customize your components with prop-based variants and enjoy full TypeScript support

Loading...

Usage

See how you can use fast-styles to add variants to your components


const WelcomeMessage = styled(Text, {
  textAlign: "center",
  fontWeight: "700",
  padding: 12,
  variants:{
    type:{
      primary:{ 
        color: "#020202",
        backgroundColor: "#ffc72c" 
      },
      secondary:{ 
        color: "white",
        backgroundColor: "#149eca" 
      }
    }
  },
  attributes:{
    children: "Welcome to fast styles"
  }
});



render(
  <WelcomeMessage type="secondary"/>
);


const WelcomeMessage = styled(Text, {
  textAlign: "center",
  fontWeight: "700",
  padding: 12,
  variants:{
    type:{
      primary:{ 
        color: "#020202",
        backgroundColor: "#ffc72c" 
      },
      secondary:{ 
        color: "white",
        backgroundColor: "#149eca" 
      }
    }
  },
  attributes:{
    children: "Welcome to fast styles"
  }
});



render(
  <WelcomeMessage type="secondary"/>
);

Loading...

Get Started