Placeholder

Create a placeholder space that can be used for uploading files via drag and drop.

Usage

This component applies a specially styled area to create a placeholder space, which can be useful, for example in combination with the Upload component. Just add the .uk-placeholder class to a <div> element.

<div class="uk-placeholder"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • <div class="uk-placeholder text-center">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

Theme development

On your tailwind.config.js file, add the Placeholder component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        placeholder: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-placeholder.uk-placeholder
hook-misc*