N Element

Naive UI Element Component

Element is a utility component that provides access to Naive UI's theme CSS variables. It renders as any HTML element and inherits theme variables from the nearest n-config-provider.

When to Use

Use this component when:

• Custom styled elements: Apply theme colors to custom elements
• CSS variable access: Use theme variables in inline styles
• Theme-aware styling: Create elements that respond to theme changes
• Consistent theming: Maintain visual consistency with Naive UI components

When to Invoke

Invoke this skill when:

• User needs to use theme CSS variables in custom elements
• User wants to create theme-aware styled components
• User needs to apply primary color or other theme colors
• User asks about accessing theme variables in templates
• User wants to create custom elements that follow the theme

Features

• CSS Variable Access: Access all theme CSS variables
• Custom Tag: Render as any HTML element
• Theme Reactive: Automatically updates when theme changes
• No Extra Styling: Pure pass-through component

API Reference

Element Props

Element Slots

Basic Usage

Basic Element with Theme Variables

<template>
  <n-space vertical>
    <n-space>
      <n-button @click="theme = darkTheme">Dark</n-button>
      <n-button @click="theme = null">Light</n-button>
    </n-space>
    <n-config-provider :theme="theme">
      <n-card>
        <n-el
          tag="span"
          style="
            color: var(--primary-color);
            transition: 0.3s var(--cubic-bezier-ease-in-out);
          "
        >
          I am a Span with primary color.
        </n-el>
      </n-card>
    </n-config-provider>
  </n-space>
</template>

<script setup>
import { ref } from 'vue'
import { darkTheme } from 'naive-ui'

const theme = ref(null)
</script>

Different Tag Types

<template>
  <n-config-provider :theme="theme">
    <n-el tag="section" style="background: var(--card-color); padding: 16px;">
      <n-el tag="h2" style="color: var(--title-text-color);">
        Title
      </n-el>
      <n-el tag="p" style="color: var(--text-color-2);">
        Paragraph content with theme colors.
      </n-el>
    </n-el>
  </n-config-provider>
</template>

Common Patterns

Theme-Aware Custom Card

<template>
  <n-config-provider :theme="theme">
    <n-el
      tag="div"
      :style="cardStyle"
    >
      <n-el tag="h3" :style="titleStyle">
        Custom Card Title
      </n-el>
      <n-el tag="p" :style="contentStyle">
        This card uses theme variables for consistent styling.
      </n-el>
    </n-el>
  </n-config-provider>
</template>

<script setup>
import { computed, ref } from 'vue'
import { darkTheme } from 'naive-ui'

const theme = ref(null)

const cardStyle = computed(() => ({
  background: 'var(--card-color)',
  border: '1px solid var(--border-color)',
  borderRadius: 'var(--border-radius)',
  padding: '16px',
  transition: 'all 0.3s var(--cubic-bezier-ease-in-out)'
}))

const titleStyle = {
  color: 'var(--title-text-color)',
  margin: '0 0 8px 0'
}

const contentStyle = {
  color: 'var(--text-color-2)',
  margin: 0
}
</script>

Custom Button with Theme Variables

<template>
  <n-config-provider :theme="theme">
    <n-el
      tag="button"
      :style="buttonStyle"
      @click="handleClick"
    >
      Custom Themed Button
    </n-el>
  </n-config-provider>
</template>

<script setup>
import { computed, ref } from 'vue'
import { darkTheme } from 'naive-ui'

const theme = ref(null)

const buttonStyle = computed(() => ({
  background: 'var(--primary-color)',
  color: 'var(--base-color)',
  border: 'none',
  borderRadius: 'var(--border-radius-small)',
  padding: '8px 16px',
  cursor: 'pointer',
  transition: 'all 0.3s var(--cubic-bezier-ease-in-out)'
}))

const handleClick = () => {
  console.log('Button clicked')
}
</script>

Status Indicator with Theme Colors

<template>
  <n-config-provider :theme="theme">
    <n-space>
      <n-el :style="getStatusStyle('success')">
        Success Status
      </n-el>
      <n-el :style="getStatusStyle('warning')">
        Warning Status
      </n-el>
      <n-el :style="getStatusStyle('error')">
        Error Status
      </n-el>
      <n-el :style="getStatusStyle('info')">
        Info Status
      </n-el>
    </n-space>
  </n-config-provider>
</template>

<script setup>
const getStatusStyle = (status) => {
  const colorMap = {
    success: 'var(--success-color)',
    warning: 'var(--warning-color)',
    error: 'var(--error-color)',
    info: 'var(--info-color)'
  }
  
  return {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '4px',
    padding: '4px 8px',
    borderRadius: 'var(--border-radius-small)',
    background: `${colorMap[status]}1a`,
    color: colorMap[status],
    fontSize: '12px'
  }
}
</script>

Custom Divider with Theme Variables

<template>
  <n-config-provider :theme="theme">
    <div>
      <p>Content above</p>
      <n-el
        tag="hr"
        :style="dividerStyle"
      />
      <p>Content below</p>
    </div>
  </n-config-provider>
</template>

<script setup>
const dividerStyle = {
  border: 'none',
  borderTop: '1px solid var(--divider-color)',
  margin: '16px 0'
}
</script>

Responsive Container with Theme

<template>
  <n-config-provider :theme="theme">
    <n-el
      tag="main"
      :style="containerStyle"
    >
      <n-el tag="article" :style="articleStyle">
        <n-el tag="h1" :style="headingStyle">
          Article Title
        </n-el>
        <n-el tag="p" :style="paragraphStyle">
          Article content with theme-aware styling.
        </n-el>
      </n-el>
    </n-el>
  </n-config-provider>
</template>

<script setup>
const containerStyle = {
  maxWidth: '1200px',
  margin: '0 auto',
  padding: '24px',
  background: 'var(--body-color)',
  minHeight: '100vh'
}

const articleStyle = {
  background: 'var(--card-color)',
  borderRadius: 'var(--border-radius)',
  padding: '24px',
  boxShadow: 'var(--box-shadow-1)'
}

const headingStyle = {
  color: 'var(--title-text-color)',
  margin: '0 0 16px 0'
}

const paragraphStyle = {
  color: 'var(--text-color-1)',
  lineHeight: '1.6'
}
</script>

Best Practices

1. Use with n-config-provider: Always wrap n-element with n-config-provider for theme context

   <n-config-provider :theme="theme">
     <n-el style="color: var(--primary-color);">
       Themed content
     </n-el>
   </n-config-provider>
   

2. Access theme variables in JS: Use useThemeVars for JavaScript access

   <script setup>
   import { useThemeVars } from 'naive-ui'
   const themeVars = useThemeVars()
   // Access: themeVars.value.primaryColor
   </script>
   

3. Common CSS variables: Frequently used theme variables

   • --primary-color: Primary brand color
   • --success-color, --warning-color, --error-color, --info-color: Status colors
   • --text-color-1, --text-color-2, --text-color-3: Text colors
   • --border-color: Border color
   • --card-color: Card background color
   • --body-color: Body background color

4. Add transitions: Include transitions for smooth theme switching

   <n-el style="
     color: var(--primary-color);
     transition: color 0.3s var(--cubic-bezier-ease-in-out);
   ">
     Smooth transition
   </n-el>
   

5. Semantic tags: Use appropriate HTML tags for accessibility

   <n-el tag="article">...</n-el>
   <n-el tag="section">...</n-el>
   <n-el tag="nav">...</n-el>
   

6. Combine with computed styles: Use computed properties for dynamic styling

   <script setup>
   import { computed } from 'vue'
   
   const customStyle = computed(() => ({
     background: isActive.value ? 'var(--primary-color)' : 'var(--card-color)',
     transition: 'background 0.3s var(--cubic-bezier-ease-in-out)'
   }))
   </script>
   

7. Keep styles in sync: Use the same CSS variables as Naive UI components for visual consistency