Custom Variants

Mijn-UI provides the flexibility to create custom variants for components, allowing you to tailor them to your project's specific needs. By extending components and their properties, you can easily customize styles and behaviors.

You can create or override the component variants, defaultVariants, and compoundVariants.

Note:

For quick customizations, refer to the Override Styles documentation.

Creating Custom Variants for Single-Slot Components

Components like the Label, Badge have only one slot, meaning they don't have multiple parts that can be individually customized. However, you can still create custom variants to change their appearance and behavior.

If you are not familiar with the variants concept, please refer to the Tailwind Variants documentation.

Example: Custom Badge Variant

Here's how you can create a custom variant for the Badge component, Go here to view the styles source code.

Extended Badge

import { Badge } from "@mijn-ui/react"
import { extendVariants } from "@mijn-ui/react"

export const MyBadge = extendVariants(Badge, {
  variants: {
    // <- modify/add variants
    variant: {
      text: "",
    },
    color: {
      olive: "bg-gradient-to-r from-[#84cc16]/20 via-[#84cc16]/70 to-[#84cc16]/20 text-[#000]",
      orange: "bg-gradient-to-r from-[#ff8c00]/20 via-[#ff8c00]/70 to-[#ff8c00]/20 text-[#fff]",
      violet: "bg-gradient-to-r from-[#8b5cf6]/20 via-[#8b5cf6]/70 to-[#8b5cf6]/20 text-[#fff]",
    },
    size: {
      xs: "px-1 h-4 text-tiny",
      md: "px-3 h-6 text-sm",
      xl: "px-5 h-10 text-lg",
    },
  },
  defaultVariants: {
    // <- modify/add default variants
    color: "olive",
    size: "xl",
  },
  compoundVariants: [
    // <- modify/add compound variants
    {
      variant: "solid",
      color: "olive",
      class: "!bg-clip-text !text-transparent from-[#84cc16]/30 via-[#84cc16] to-[#84cc16]/30",
    },
  ],
})

import { MyBadge } from "./badge-extend"

const DemoUsage = () => {
  return (
  <div>
    <MyBadge color="olive" size="xl" variant="ghost">
      Extended Badge
    </MyBadge>

    <MyBadge color="olive" size="xl">
      Extended Badge
    </MyBadge>
  </div>
  )
}

Creating Custom Variants for Multi-Slot Components

For components with multiple slots, such as the Input component, you can create custom variants for each slot. This allows for more granular control over the component's appearance and behavior.

If you are not familiar with the variants concept, please refer to the Tailwind Variants documentation.

Example: Custom Input Variant

Here's how you can create a custom variant for the Input component, Go here to view the styles source code.

import { extendVariants } from "@mijn-ui/react"
import { Input } from "@mijn-ui/react"

export const MyInput = extendVariants(Input, {
  variants: {
    // <- modify/add variants
    color: {
      stone: {
        // <- add a new color variant

        base: [
          // <- Input element slot
          "bg-zinc-400",
          "text-zinc-800",
          "placeholder:text-zinc-600",
          // dark theme
          "dark:bg-zinc-800",
          "dark:text-zinc-400",
          "dark:placeholder:text-zinc-600",
        ],
      },
    },
    size: {
      xs: {
        wrapper: "",
        base: "h-6 min-h-6 px-1 text-tiny",
      },
      md: {
        wrapper: "",
        base: "h-10 min-h-10 text-sm",
      },
      xl: {
        wrapper: "",
        base: "h-14 min-h-14 text-base",
      },
    },
    radius: {
      none: {
        base: "rounded-none",
      },
      sm: {
        base: "rounded-sm",
      },
      md: {
        base: "rounded-md",
      },
      lg: {
        base: "rounded-lg",
      },
      full: {
        base: "rounded-full",
      },
    },
  },
  defaultVariants: {
    color: "stone",
    radius: "full",
    size: "md",
  },
})

import { MyInput } from "./input-extend"
import { Search } from "lucide-react"

const DemoUsage = () => {
  return <MyInput startIcon={<Search />} placeholder="Input With Extended Variants" />
}

Note:

All MijnUI components have the Styles source link on top of the page. This link will take you to the styles source code of the component. You can use this as a reference when creating your own custom component.

Types

Main Function

const Component = extendVariants(BaseComponent, options, config);

/**
 * BaseComponent -> MijnUI component to extend
 * options -> the variants to add/modify
 * config -> config to extend the component
 */

Options

type ExtendVariantsOptions = {
  variants?: Record<string, Record<string, ClassValue>>;
  defaultVariants?: Record<string, ClassValue>;
  compoundVariants?: Array<Record<string, string> & ClassProp>;
};

Config

/**
   * Whether to merge the class names with `tailwind-merge` library.
   * It's avoid to have duplicate tailwind classes. (Recommended)
   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
   * @default true
   */
  twMerge?: boolean;
  /**
   * The config object for `tailwind-merge` library.
   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
   */
  twMergeConfig?: TWMergeConfig;

See the Tailwind Merge Config to learn more about it.

Custom Variants

Note:

Note:

On this page