Apply consistent styles and enhancements with just one click, ensuring your projects maintain a professional and cohesive look. Save time, simplify processes, and bring your creative vision to life—one preset at a time! Perfect for beginners and professionals alike, presets empower you to stay focused on what you do best

You can use our available presets or create your own.

Follow the steps to create your preset

1. Button

* From the Button list page, click the Add new button button

* In the settings, you can customize options
     - General
          + Button’s title should be clear, action-oriented, and concise
          + Typography determines how text is displayed on the button, affecting readability and aesthetics.
          + Adding icon can enhance usability and visual appeal by reinforcing the button’s purpose.
          + Padding inside the button ensures it has breathing space and improves tap-ability.
          + Margin outside the button ensures appropriate spacing between the button and other elements on the            page

     - Settings Text color, icon color, background color, border for Default, Hover, Active, Disable button
          + The text color of a button should enhance readability and ensure strong contrast with the button's background.
          + Icon color should align with the button’s text color or be slightly different for visual distinction.
          + The background color sets the button's visual tone and helps attract user attention.
          + Border helps define the button’s shape and style.

After configuration, you can Save and Set default settings, Duplicate or Delete preset

 2. Countdown

* From the Countdown list page, click the Add new Countdown button

* In the settings, you can customize options

     - General
          + Title: The title sets the context for the countdown.
          + Time format: Define how the time is displayed (e.g., days, hours, minutes, and seconds).
          + Style: Choose between different visual styles for your countdown
          + Background color: Set a background color that complements your design.
          + Padding: Add padding to create space inside the countdown container.
          + Border: Define the border style for the countdown box.
          + Gap: Control the spacing between different elements of the countdown (e.g., between time blocks).

     - Text & Number
          + Typography: Setting that matches your brand style and ensures readability.
          + Text color: Set the color for the countdown numbers and labels.

     - Delimiters
          + Delimiter type: Choose how you want to separate the time unit (Colon, Slash, Dot)
          + Delimiter color: Set a color for the delimiters to match or contrast with the numbers.

After configuration, you can Save and Set default settings, Duplicate or Delete Preset

 3. Timeline

* From the Roadmap list page, click the Add new Roadmap button

* In the settings, you can customize options
     - General
          + Title: The title should clearly convey the purpose or goal of the roadmap.
          + Typography: Setting that matches your brand style and ensures readability.
          + Text color: Ensure the title stands out by selecting a color contrasting with the background.
          + Icon color: Icons should complement the text color while maintaining visibility.

     - Checkpoints
          + Style: Decide on the visual design of your checkpoints
          + Checkpoints color default: The default color for inactive checkpoints.
          + Checkpoints color active: The color for active or completed checkpoints.

     - Progress line
          + Style: Choose radius or dotted line to represent progress.
          + Background line color: The color for the inactive portion of the progress line.
          + Line active color: The color for the active portion of the progress line.

     - Date & Time
          + Text color: Ensure dates and times are legible by selecting an appropriate color.
          + Background color: The background color for date and time containers.
          + Border: Add a border for definition.
          + Padding: Add spacing inside the container for clarity.

     - Additional Information
           + Icon color: Icons for additional information should be easily noticeable.
           + Background color: Background for additional info sections should be distinguishable but subtle.

After configuration, you can Save and Set default settings, Duplicate or Delete Preset

 4. Payment option

* From the Purchase option list page, click the Add new Payment option button

* In the settings, you can customize options
     - General
          + Title: Provide a concise and clear heading for the purchase option section.
          + Choice list style: Select how the choices are visually presented.
          + Title typography: Define the size, and weight,... for the title.
          + Description typography: Set typography for additional descriptions under each option.
          + Badge typography: Customize style for badges or labels.
          + Badge border: Add a border to distinguish badges.
          + Option border: Outline the purchase option boxes.

     - Default: config Title color, Description color, Background color, Badge text color, Badge background color

     - Active
          + Choice list color: Highlight the active option visually.
          + Config Title color, Background color, Badge text color, Badge background color
          + Border: Make the active option more defined.

     - Disable: you can config Opacity, Text color, Background color, Badge text color, Badge background color

After configuration, you can Save and Set default settings, Duplicate or Delete Preset