Styles & Variables
Plus UI's styles and variables helps designers and developers to work together more efficiently, reducing the risk of inconsistencies, enlightening the principles and patterns for specific problems.
Styles
Variables
Plus UI Design System
How to use Plus UI Styles & Variables
On the right hand side panel, click ‘Open Variables’ icon. A pop up will open and you will see all the collections such as color, spacing, size, border, breakpoints and opacity. These variables (tokens) is being used for our components.
Powerful Integration with Tailwind CSS
Tailwind CSS empowers developers with unparalleled styling capabilities that elevate the Plus UI Design System, providing users with a comprehensive and integrated toolkit for crafting exceptional user interfaces.
Effortless Styling: Plus UI effortlessly integrates with Tailwind CSS, allowing users to leverage the robust utility-first framework for styling and layout.
Responsive Design: Tailwind CSS's responsive design capabilities complement Plus UI's components, ensuring optimal display across various devices and screen sizes.
Customization Harmony: Tailwind CSS users will tailor our components with the same ease and efficiency.
Resources for Using Styles & Variables in Figma
If you need information and clarification on styles and variables and how to use them, you can check the Figma’s resource below link.
Get help
Still having issue? Get help from our communities below.
Last updated
