Mask
Mask conforms the UI in its default slot to a specified shape.
Code Example
<Mask squircle class="w-36">
<img src="https://api.lorem.space/image/face?hash=33791" />
</Mask>Components
Mask is a standalone component.
Mask
Mask can be customized with the following props:
| Prop | Type | Description |
|---|---|---|
shape | string | sets the shape of the internal Mask to any of the below prop names |
squircle | boolean | sets the shape to squircle. |
heart | boolean | sets the shape to heart. |
hexagon | boolean | sets the shape to hexagon. |
hexagon2 | boolean | sets the shape to hexagon2. |
decagon | boolean | sets the shape to decagon. |
pentagon | boolean | sets the shape to pentagon. |
diamond | boolean | sets the shape to diamond. |
square | boolean | sets the shape to square. |
circle | boolean | sets the shape to circle. |
parallelogram | boolean | sets the shape to parallelogram. |
parallelogram2 | boolean | sets the shape to parallelogram2. |
parallelogram3 | boolean | sets the shape to parallelogram3. |
parallelogram4 | boolean | sets the shape to parallelogram4. |
star | boolean | sets the shape to star. |
star2 | boolean | sets the shape to star2. |
triangle | boolean | sets the shape to triangle. |
triangle2 | boolean | sets the shape to triangle2. |
triangle3 | boolean | sets the shape to triangle3. |
triangle4 | boolean | sets the shape to triangle4. |
Size
As shown above, CSS is used to size the Mask component. You can assign either a width class
or a height class and the Mask will keep a 1-to-1 ratio (so basically a square container, even
when the Mask is another shape). Using the class property means works perfectly
with Tailwind's JIT compiler. So there are only two concerns to making sure it works:
- Make sure the class is in the default Tailwind Config. See Default Tailwind Sizes
- If it's not in the default config, make sure you've added the custom class. See Customizing Your Theme