0.0.1 • Published 7 months ago
@tailus/themer-popover v0.0.1
Popover Theme
Overview
The popover component theme is a collection of Tailwindcss utilities that can be used to create popover components with a single variant. Popover components are modal windows that appear in front of app content to provide critical information or ask for a decision.
Installation
To install the popover component theme, run the following command:
npm install @tailus/themer-popover
Importation
To import the popover component theme, you can use the following import:
import { popover } from "@tailus/themer-popover";
Properties
The popover object contains the following properties:
content
: The Tailwindcss utility for the content of the popover.arrow
: The Tailwindcss utility for the arrow of the popover.title
: The Tailwindcss utility for the title of the popover.description
: The Tailwindcss utility for the description of the popover.close
: The Tailwindcss utility to add to the close button of the popover.
Example
Radix UI
import * as Popover from "@radix-ui/react-popover";
import { InfoCircledIcon, Cross2Icon } from "@radix-ui/react-icons";
import { popover } from "@tailus/themer-popover";
import { softIconButton, ghostIconButton } from "@tailus/themer-button";
const PopoverUI = () => (
<Popover.Root>
<Popover.Trigger>
<button className={softIconButton.gray.md}>
<span className="sr-only">Learn more</span>
<InfoCircledIcon className={softIconButton.icon.md} />
</button>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content className={popover.content}>
<div className={popover.title}>Title</div>
<p className={popover.description}>
Inventore perspiciatis atque consequatur? Autem reiciendis nemo error, rerum
tempora.
</p>
<Popover.Close asChild>
<button className={ghostIconButton.gray.md + " !absolute top-1 right-1"}>
<span className="sr-only">Dismiss dialog</span>
<Cross2Icon className={ghostIconButton.icon.md} aria-hidden />
</button>
</Popover.Close>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
export default PopoverUI;
Customization
The following properties can be customized:
- border radius
- padding
tailus: {
components: {
popover: {
borderRadius: "2xl",
padding : "6",
},
},
},
Customization that will be applied to other components (menu components):
- light border color
- dark border color
- dark bg
- shadow size
- shadow opacity
tailus: {
components: {
menu: {
borderRadius: "2xl",
borderColor : "200",
backgroundOpacity : "90%",
backdropBlur : "xl",
shadow : {
size : "lg",
opacity : "10"
},
dark : {
borderColor : "800",
background : "950",
backgroundOpacity : "90%",
backdropBlur : "2xl",
}
},
},
},
0.0.1
7 months ago