Override Styles

Overriding default component styles is as simple as passing your own class names to the `className` or to the `classNames` prop for components with slots.

What is a Slot?

A slot is a part of a component that can be styled separately. For example, the Accordion component has multiple slots/parts that can be styled individually, such as base, item, triggerWrapper, trigger, etc.

Components with slots have a classNames prop that allows you to style each slot separately.

Overriding a Component

Let's override the default styles of the Badge component, which has only one base slot.

Custom Badge

import { Badge } from "@mijn-ui/react"
 
const BadgeOverride = () => {
  return (
    <Badge
      unstyled
      className="cursor-pointer rounded-full bg-gradient-to-r from-primary/20 via-primary/70 to-primary/20 px-2 py-0.5 text-tiny font-semibold transition-shadow duration-300 hover:shadow-large hover:shadow-primary/20 hover:brightness-105 active:scale-95 active:brightness-90 dark:via-primary/40 dark:to-primary/20"
    >
      Custom Badge
    </Badge>
  )
}
 
export default BadgeOverride

Components with Slots

All components have slots that can be styled separately.

Note:

For components like label and badge that only have one slot, you cannot use the classNames prop to style the slots. Instead, you can pass the className prop to customize the style of the component. An example of this has already been shown above.

For components with multiple slots, you can pass the classNames prop to style each slot separately. For example, the Accordion component has the following slots:

base: The main container of the accordion.
item: Each individual item within the accordion.
triggerWrapper: The wrapper around the trigger element.
trigger: The element that triggers the accordion to open or close.
icon: The icon displayed within the trigger.
contentWrapper: The wrapper around the content.
content: The content displayed when the accordion is open.

Each slot can be styled using the classNames prop. The example below shows how to change the styles of some slots to create an Accordion component with a different style.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@mijn-ui/react"
 
const AccordionCustomStyles = () => {
  return (
    <Accordion
      classNames={{
        base: "max-w-96 w-full rounded-2xl p-4 bg-gradient-to-tr from-primary/20 to-primary/50 dark:from-primary/10 dark:to-primary/30", 
        item: "border-none bg-white/50 dark:bg-white/20 my-2 backdrop-blur rounded-large px-4", 
        contentWrapper: "", 
        content: "", 
        triggerWrapper: "", 
        trigger: "rounded-large text-primary", 
        icon: "", 
      }}
      type="single"
      collapsible
    >
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it unstyled</AccordionTrigger>
        <AccordionContent>
          Yes, you can make the components unstyled by setting the{" "}
          <span className="font-semibold">unstyled</span> prop to{" "}
          <span className="font-semibold">true</span> on either a single
          component or a parent component.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes! You can animate the Accordion with CSS or JavaScript.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
 
export default AccordionCustomStyles

Override Styles

What is a Slot?

Overriding a Component

Components with Slots

Note:

Is it accessible

Is it unstyled

Is it animated?

On this page