Empty

Displays an empty state placeholder when there is no content.

No content yet

You haven't created any content. Get started by creating your first item.

Installation

React

npx @galaxy-stack/nebula-cli add empty

Vue

npx @galaxy-stack/nebula-cli add empty

Angular

npx @galaxy-stack/nebula-cli add empty

global

# If you have installed galaxy-design globally
galaxy-design add empty

Usage

React

import { Empty } from '@/components/empty'
import { Button } from '@/components/button'

export default function EmptyDemo() {
  return (
    <Empty description="No data available">
      <Button>Create New</Button>
    </Empty>
  )
}

Vue

<script setup lang="ts">
import { Empty } from '@/components/empty'
import { Button } from '@/components/button'
</script>

<template>
  <Empty description="No data available">
    <Button>Create New</Button>
  </Empty>
</template>

Angular

import { Component } from '@angular/core'
import { EmptyComponent } from '@/components/empty'
import { ButtonDirective } from '@/components/button'

@Component({
  selector: 'app-empty-demo',
  standalone: true,
  imports: [EmptyComponent, ButtonDirective],
  template: `
    <ui-empty description="No data available">
      <button gButton>Create New</button>
    </ui-empty>
  `
})
export class EmptyDemo {}

API Reference

Props

Prop	Type	Default	Description	Frameworks
description	ReactNode	-	Empty state description content	All
image	ReactNode	-	Custom icon or image content	All
imageAlt	string	'Empty'	Accessible label for default illustration	All
className	string	''	CSS class names for container	All
children	ReactNode	-	Optional action content below description	All

Examples

Custom Image

React

<Empty
  image={<img src="/empty.svg" alt="No data" className="w-32 h-32" />}
  description="No items found"
/>

With Action Button

React

<Empty description="No projects yet">
  <Button onClick={() => navigate('/create')}>
    Create First Project
  </Button>
</Empty>

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)