Annonce Component Theme

Overview

The annonce component theme is a collection of Tailwindcss utilities that can be used to create annonce components with two variants: soft and outlined. Annonce components are used to display an announcement on top of the hero section.

Installation

To install the annonce component theme, run the following command:

npm install @tailus/themer-annonce

Importation

To import the annonce component theme, you can use the following import:

import { annonce, outlinedAnnonce } from "@tailus/themer-annonce";

Variants

The annonce component theme provides two variants:

• soft (default): A variant with lighter background.
• annonce (default): An outlined variant with rounded corners and lighter border colors.

Reference

The annonce component theme contains the following properties:

Annonce = {
    root: string;
    concern: {
        primary: string;
        secondary: string;
        accent: string;
        danger: string;
        warning: string;
        info: string;
        success: string;
        gray: string;
        neutral: string;
    };
    message: string;
};

The annonce component theme object contains the following properties:

• root: The Tailwindcss utilities for the root element of the annonce component.
• concern: The Tailwindcss utilities for the concern element of the annonce component. The concern element is a small indicator that indicates the importance of the announcement. The concern element can have one of the following colors: primary, secondary, accent, danger, warning, info, success, gray, or neutral.
• message: The Tailwindcss utilities for the message element of the annonce component. The message element is the main content of the annonce.

Customization

The following property can be customized:

• borderRadius

tailus: {
    components: {
        annonce: {
            rounded: "md";
        }
    }
}

Usage

To use the annonce component theme, simply import the appropriate variant and add the appropriate Tailwindcss utilities to the annonce element and its child elements. For example, to create a default annonce component, you would import the annonce variant and add its properties to the annonce element.

Example

import { annonce as annonceTheme } from "@tailus/themer-annonce";

const Annonce = () => (
    <a href="#" className={annonceTheme.root}>
        <span className={annonceTheme.concern.primary}>New</span>
        <span className={annonceTheme.message}>Introducing a all new Tailus !</span>
    </a>
);

export default Annonce;