Skip to main content

Borders

How to use ?​

Generated styles provided by the borders section of the theme configuration assist in applying border radius, width and color to your components. You can access these styles using the following code:

const { borders } = useTheme()

For more details, refer to the borders section of the theme configuration.

Generated borders​

Here is the representation of the generated styles for a given BordersConfig like the one below:

export const config = {
    //...
    borders: {
        widths: widthsValues,
        radius: radiusValues,
        colors: colorsValues,
    },
    //...
}

Where widthsValues and radiusValues are arrays of numbers, widthValue is an item of widthsValues, radiusValue is an item of radiusValues, and colorsValues is an object with colorsKey keys and colorsValue values, the generated styles are as follows:

border nameGenerated style
borders.w__widthValue_{ borderWidth: widthValue }
borders.wTop__widthValue_{ borderWidth: widthValue }
borders.wBottom__widthValue_{ borderWidth: widthValue }
borders.wLeft__widthValue_{ borderWidth: widthValue }
borders.wRight__widthValue_{ borderWidth: widthValue }
borders.rounded__radiusValue_{ borderRadius: radiusValue }
borders.roundedTop__radiusValue_{ borderRadius: radiusValue }
borders.roundedBottom__radiusValue_{ borderRadius: radiusValue }
borders.colorsKey{ borderColor: colorsValue }

Static borders styles​

Some border styles, don't require dynamic generation. To accommodate this, we offer the staticBorderStyles object that houses static styles for border. You can use this file as-is or customize it to your preferences. These styles will be seamlessly merged with the generated ones, making them accessible through the borders object of the useTheme hook.

Playground​

Here's a simple playground that provides a visual representation of the objects generated from a given borders configuration:

export const config = { 
  //... 
  border: {
    widths: []
    radius: [], 
    colors: {
      : ,
      // you can add more key/value here
    },
  }
  //...
}

Generated classes

PropertyValue
borders.w_1{ borderWidth: 1 }
borders.wTop_1{ borderTopWidth: 1 }
borders.wRight_1{ borderRightWidth: 1 }
borders.wBottom_1{ borderBottomWidth: 1 }
borders.wLeft_1{ borderLeftWidth: 1 }
borders.w_2{ borderWidth: 2 }
borders.wTop_2{ borderTopWidth: 2 }
borders.wRight_2{ borderRightWidth: 2 }
borders.wBottom_2{ borderBottomWidth: 2 }
borders.wLeft_2{ borderLeftWidth: 2 }
borders.rounded_5{ borderRadius: 5 }
borders.roundedTop_5{ borderRadius: 5 }
borders.roundedBottom_5{ borderRadius: 5 }
borders.rounded_10{ borderRadius: 10 }
borders.roundedTop_10{ borderRadius: 10 }
borders.roundedBottom_10{ borderRadius: 10 }
borders.red{ borderColor: #ff0000 }