Is there any way we can globally override the default presets ?

[sawa-ko]

📚 What are you trying to do?

I want the buttons and inputs, for example, when they have the hover or focus effect to be seen with a transition and not suddenly the change of state.

🔍 What have you tried?

Currently I have not used the library completely but for now I have not seen any options or I have not understood.

ℹ️ Additional context

No response

[phojie]

Hello @sawa-ko , are you referring to using presets only ? I am not sure what you mean but, here's the example of the usage:

https://unaui.com/getting-started/installation#example-usage-1

Can you reproduce something, so that I can help you for the example that you need?

[sawa-ko]

Hello, thank you for the quick response. I mean that there is a transition animation between the normal state and hover of a button.

[phojie]

Hello @sawa-ko . you can refer to this example:

https://unaui.com/elements/button#color

Check the color with states example, you can use class directly like this:

Nuxt (components-mode)

<NButton
 label="Button"
 class="transition delay-300 ease-in-out"
 btn="soft-error hover:soft-success"
/>

HTML (presets-mode)

<button
 class="transition delay-300 ease-in-out"
 btn="~ soft-error hover:soft-success"
>
 Button
</button

[sawa-ko]

Any way that it is global for all the buttons and that you don't have to put it manually on each of them?

I'm using nuxt module btw.

[phojie]

@sawa-ko I have created a starter template here with an example of how you can override default presets.

Here's an example base on my last given example to make it globally default in btn:

unocss.config.ts

import { defineConfig } from 'unocss'

import una from '@una-ui/nuxt/una.config'

export default defineConfig({
  shortcuts: [
    {
      'btn': 'transition delay-1000 ease-in-out bg-transparent text-0.875em leading-5 gap-0.42857142857142855em btn-rectangle rounded-md inline-flex justify-center items-center btn-disabled font-semibold cursor-pointer',
      
      // add more here...
    },
  ],

  // una-ui config
  ...una()
})

You can find all the default presets here https://github.com/una-ui/una-ui/tree/main/packages/preset/src/_shortcuts , if you want to override something make sure to use the same preset name provided

[phojie]

Close as initial documentation for configuration is now available, please visit https://unaui.com/getting-started/configuration for more information.