Styling

Easily customize Elemnts UI components using Panda CSS, recipes, or popular libraries like Tailwind CSS.

Elemnts UI leverages Panda CSS to provide a flexible and type-safe approach to styling components directly within your JSX.

Quick Styling with Style Props

Style props let you apply CSS properties directly to components. Elemnts UI includes a styled factory that enables these props on any HTML element.

import { styled } from "@elemnts-ui/react";

function Example() {
  return (
    <styled.button
      px="4"        // Horizontal padding
      py="2"        // Vertical padding
      rounded="md"  // Medium border radius
      bg="accent.primary" // Background color
      color="white"  // Text color
      _hover={{ bgColor: "blue.90" }} // Hover state
    >
      Click Me
    </styled.button>
  );
}

Styled Factory

The styled function helps you create reusable components with built-in styles or complex recipes.

Adding Default Styles

Define base styles for any component, such as links or buttons.

import { styled } from "@elemnts-ui/react";

const Link = styled("a", {
  base: {
    color: "accent.primary",
    textDecoration: "none",
    _hover: { textDecoration: "underline" },
  },
});

Creating Component Variants

Recipes allow you to define multiple visual styles for a component, such as cards or buttons.

const Card = styled("div", {
  base: {
    bgColor: "bg.primary",
    p: "4",
    rounded: "lg",
  },
  variants: {
    variant: {
      outline: { border: "1px solid", borderColor: "stroke.primary" },
      ghost: { bgColor: "transparent", _hover: { bgColor: "bg.secondary" } },
    },
  },
});

// Usage:
<Card variant="outline">...</Card>
<Card variant="ghost">...</Card>

Styling Interactive States

Panda CSS makes it easy to style components based on their state (hover, active, dark mode, etc.) using condition-based props.

<Button
  bg="blue.50"
  _hover={{ bgColor: "blue.60" }}      // Hover state
  _active={{ transform: "scale(0.98)" }} // Active state
  _dark={{ bgColor: "blue.200", color: "black" }} // Dark mode
>
  Themed Button
</Button>

Removing Default Styles

All Elemnts UI components support the unstyled prop. Setting it to true removes all default styles, allowing you to apply your own CSS or use a utility framework like Tailwind.

import { Accordion } from "@elemnts-ui/react";

<Accordion.Root unstyled>
  <Accordion.Item value="1" className="custom-border">
    {/* ... */}
  </Accordion.Item>
</Accordion.Root>

Tailwind CSS Support

Elemnts UI components seamlessly integrate with Tailwind CSS when using the unstyled prop and className.

<Button
  unstyled
  className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
>
  Tailwind Button
</Button>

Slot Recipes

For complex components like Accordions or Tabs, Elemnts UI uses Slot Recipes to define styles for each internal part in a single configuration.

import { defineSlotRecipe } from '@pandacss/dev';

export const myMenuRecipe = defineSlotRecipe({
  className: 'menu',
  slots: ['root', 'item', 'trigger'],
  base: {
    root: { bgColor: 'bg.primary', shadow: 'md' },
    item: { p: '2', _hover: { bgColor: 'bg.secondary' } },
    trigger: { fontWeight: 'bold' }
  }
});

// Usage:
<Menu.Root className={myMenuRecipe.className}>
  <Menu.Item className={myMenuRecipe.item}>Item 1</Menu.Item>
  <Menu.Trigger className={myMenuRecipe.trigger}>Open Menu</Menu.Trigger>
</Menu.Root>