suiss/ui
  • Docs
  • Components
  • Patterns
  • Interactions
  • Charts
  • Blocks
GitHubGet started
DocsComponentsPatternsInteractionsChartsBlocks
Components82
  • Overview
  • Accordion
  • Alert
  • Alert Dialog
  • Alert Sheet
  • Amount Input
  • Aspect Ratio
  • Attachment
  • Avatar
  • Badge
  • Bottom Bar
  • Breadcrumb
  • Bubble
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Chip
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Dialog
  • Direction
  • Drawer
  • Dropdown Menu
  • Empty
  • FAB
  • Field
  • Fullscreen Menu
  • Haptics
  • Header
  • Hover Card
  • Icon
  • Input
  • Input Accessory Bar
  • Input Group
  • Input OTP
  • Item
  • Kbd
  • Keyboard Scroll View
  • Keypad
  • Label
  • Marker
  • Menubar
  • Message
  • Message Scroller
  • Native Select
  • Navigation Menu
  • Page Indicator
  • Pagination
  • Pin Pad
  • Popover
  • Progress
  • QR Scanner
  • Questionnaire
  • Radio Group
  • Resizable
  • Screen
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature Pad
  • Skeleton
  • Slider
  • Spinner
  • Switch
  • Tab Bar
  • Table
  • Tabs
  • Text
  • Textarea
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Wheel Picker
  • Widget

suiss/ui · Component

Empty

A placeholder that explains why a view has no content and what people can do next.

Empty is an open-source component from suiss/ui for React, React Native, SwiftUI and Jetpack Compose. The @esuiss/ui CLI copies its source into your project, so you own the code.

import { ArrowUpRightIcon, FolderSimpleIcon } from "@phosphor-icons/react"
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export default function EmptyDemo() {
  return (
    <div className="w-[32rem]">
      <Empty>
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <FolderSimpleIcon />
          </EmptyMedia>
          <EmptyTitle>No projects yet</EmptyTitle>
          <EmptyDescription>
            You haven&apos;t created any projects yet. Get started by creating
            your first project.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <div className="flex gap-2">
            <Button>Create project</Button>
            <Button variant="outline">Import project</Button>
          </div>
          <Button variant="link" size="sm" className="text-muted-foreground">
            Learn more
            <ArrowUpRightIcon data-icon="inline-end" />
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}

Empty is a centered container for empty states. Inside it, EmptyHeader groups an optional EmptyMedia with an EmptyTitle and EmptyDescription, and EmptyContent holds the actions, such as buttons, a search field or a help link. All parts are plain, styled elements with no interactive behavior of their own.

Use it when a list, folder, search or page has nothing to show. Keep the title short and use the description to suggest a next step.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/empty

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add empty

Manual

  1. Install the dependencies and add the cn helper:
$ pnpm add class-variance-authority
  1. Copy the source into components/ui/empty.tsx:
components/ui/empty.tsx
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

function Empty({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty"
      className={cn(
        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl border-dashed p-12 text-center text-balance",
        className
      )}
      {...props}
    />
  )
}
  1. Update the import paths to match your project.

Usage

import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@/components/ui/empty"
<div className="w-[32rem]">
  <Empty>
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <FolderSimpleIcon />
      </EmptyMedia>
      <EmptyTitle>No projects yet</EmptyTitle>
      <EmptyDescription>
        You haven&apos;t created any projects yet. Get started by creating
        your first project.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <div className="flex gap-2">
        <Button>Create project</Button>
        <Button variant="outline">Import project</Button>
      </div>
      <Button variant="link" size="sm" className="text-muted-foreground">
        Learn more
        <ArrowUpRightIcon data-icon="inline-end" />
      </Button>
    </EmptyContent>
  </Empty>
</div>

Empty has a dashed border style but no border width by default; add border through className to show an outline. Set EmptyMedia to variant="icon" for a small icon in a tinted tile, or keep the default to render media such as a large icon or illustration as is. Links placed directly inside EmptyDescription are underlined.

Examples

Outline

An empty state with a visible dashed outline, added through className="border".

import { CloudIcon } from "@phosphor-icons/react"
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export default function EmptyOutline() {
  return (
    <div className="w-[32rem]">
      <Empty className="border">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <CloudIcon />
          </EmptyMedia>
          <EmptyTitle>Cloud storage is empty</EmptyTitle>
          <EmptyDescription>
            Upload files to your cloud storage to access them anywhere.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button variant="outline" size="sm">
            Upload files
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}

Default media

An empty state with a large icon in EmptyMedia using the default variant.

import { FolderSimpleIcon } from "@phosphor-icons/react"
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export default function EmptyDefaultMedia() {
  return (
    <div className="w-[32rem]">
      <Empty>
        <EmptyHeader>
          <EmptyMedia>
            <FolderSimpleIcon className="text-muted-foreground size-12" />
          </EmptyMedia>
          <EmptyTitle>This folder is empty</EmptyTitle>
          <EmptyDescription>Drag files here to add them.</EmptyDescription>
        </EmptyHeader>
      </Empty>
    </div>
  )
}

With search

A not-found state with an InputGroup search field and a support link in EmptyContent.

import { MagnifyingGlassIcon } from "@phosphor-icons/react"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@/components/ui/empty"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export default function EmptyWithSearch() {
  return (
    <div className="w-[32rem]">
      <Empty>
        <EmptyHeader>
          <EmptyTitle>404 - Not found</EmptyTitle>
          <EmptyDescription>
            The page you&apos;re looking for doesn&apos;t exist. Try searching
            for what you need below.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <InputGroup className="sm:w-3/4">
            <InputGroupInput placeholder="Search pages..." />
            <InputGroupAddon>
              <MagnifyingGlassIcon />
            </InputGroupAddon>
          </InputGroup>
          <EmptyDescription>
            Need help? <a href="#support">Contact support</a>
          </EmptyDescription>
        </EmptyContent>
      </Empty>
    </div>
  )
}

API Reference

Anatomy7 parts
<Empty>
<EmptyHeader>
<EmptyMedia />
<EmptyTitle />
<EmptyDescription />
</EmptyHeader>
<EmptyContent>
<EmptyDescription />
</EmptyContent>
</Empty>
01

Empty

The centered container for the empty state.

Also accepts the props of React.ComponentProps<"div">.

02

EmptyHeader

Groups the media, title and description.

Also accepts the props of React.ComponentProps<"div">.

03

EmptyMedia

Holds an icon or image above the title.

PropTypeDefaultDescription
variant"default" | "icon""default"icon places the icon in a small rounded bg-muted tile; default renders the media without a background.

Also accepts the props of React.ComponentProps<"div">.

04

EmptyTitle

The short heading of the empty state.

Also accepts the props of React.ComponentProps<"div">.

05

EmptyDescription

Supporting text that explains the state or suggests a next step.

Also accepts the props of React.ComponentProps<"p">.

06

EmptyContent

Holds actions such as buttons, inputs or links.

Also accepts the props of React.ComponentProps<"div">.

Accessibility

  • EmptyTitle renders a div, not a heading. If the empty state should appear in the document outline, render a heading element inside it or pass the appropriate role and level.
  • Give interactive elements in EmptyContent clear accessible names.

Notes

  • Styling hooks: data-slot values empty, empty-header, empty-icon (on EmptyMedia), empty-title, empty-description and empty-content.
  • EmptyMedia also sets data-variant.
  • EmptyDescription renders a div element even though it accepts paragraph props.
  • Uses the muted, foreground, muted-foreground and primary tokens.
iOS
Empty on iOS in light modeEmpty on iOS in dark mode
import { FolderOpenIcon } from "phosphor-react-native"
import { Button } from "@/components/ui/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"

export function EmptyExample() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Icon as={FolderOpenIcon} />
        </EmptyMedia>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>
          You haven't created any projects yet. Get started by creating your
          first project.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>
          <Text>Create project</Text>
        </Button>
        <Button variant="link">
          <Text>Import project</Text>
        </Button>
      </EmptyContent>
    </Empty>
  )
}
import EsuissUI
import PhosphorSwift
import SwiftUI

struct EmptyExample: View {
  var body: some View {
    Empty {
      EmptyHeader {
        EmptyMedia(.icon) { Ph.folderOpen.regular }
        EmptyTitle("No projects yet")
        EmptyDescription("You haven't created any projects yet. Get started by creating your first project.")
      }
      EmptyContent {
        Button("Create project") {}
          .buttonStyle(.variant())
        Button("Import project") {}
          .buttonStyle(.variant(.link))
      }
    }
  }
}
import androidx.compose.runtime.Composable
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.regular.FolderOpen
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonVariant
import com.esuiss.ui.components.Empty
import com.esuiss.ui.components.EmptyContent
import com.esuiss.ui.components.EmptyDescription
import com.esuiss.ui.components.EmptyHeader
import com.esuiss.ui.components.EmptyMedia
import com.esuiss.ui.components.EmptyMediaVariant
import com.esuiss.ui.components.EmptyTitle
import com.esuiss.ui.components.Icon

@Composable
fun EmptyDefault() {
    Empty {
        EmptyHeader {
            EmptyMedia(variant = EmptyMediaVariant.Icon) {
                Icon(PhosphorIcons.Regular.FolderOpen, contentDescription = null)
            }
            EmptyTitle("No projects yet")
            EmptyDescription("You haven't created any projects yet. Get started by creating your first project.")
        }
        EmptyContent {
            Button("Create project", onClick = {})
            Button("Import project", onClick = {}, variant = ButtonVariant.Link)
        }
    }
}

Empty is a centered column that fills the available space and holds an EmptyHeader with optional EmptyMedia, an EmptyTitle and an EmptyDescription, followed by EmptyContent for actions. Text is centered and the header and content are limited to a readable width.

Use it for empty lists, search results with no matches and first-run screens.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/empty

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add empty
$ pnpm dlx @esuiss/ui@latest add empty --platform swift
$ pnpm dlx @esuiss/ui@latest add empty --platform kotlin

The CLI also adds what it builds on: Icon, Text.

Manual

  1. Install the dependencies:
npx expo install class-variance-authority cn

  1. Add the pieces it builds on: Icon, Text.

  2. Copy the source into components/ui/empty.tsx:

uniwind/components/ui/empty.tsx
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import { View, type ViewProps } from "react-native"
import { IconClassContext } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"

function Empty({ className, ...props }: ViewProps) {
  return (
    <TextClassContext.Provider value="text-center">
      <View
        className={cn(
          "w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl p-12",
          className
        )}
        {...props}
      />
  1. Update the import paths to match your project.
  1. Install the dependencies:
npx expo install class-variance-authority cn

  1. Add the pieces it builds on: Icon, Text.

  2. Copy the source into components/ui/empty.tsx:

nativewind/components/ui/empty.tsx
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import { View, type ViewProps } from "react-native"
import { IconClassContext } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"

function Empty({ className, ...props }: ViewProps) {
  return (
    <TextClassContext.Provider value="text-center">
      <View
        className={cn(
          "w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl p-12",
          className
        )}
        {...props}
      />
  1. Update the import paths to match your project.

  1. Add the pieces it builds on: Icon, Text.

  2. Copy the source into components/ui/empty.tsx:

stylesheet/components/ui/empty.tsx
import { StyleSheet, View, type ViewProps } from "react-native"
import { IconSizeContext } from "@/components/ui/icon"
import { Text, TextStyleContext } from "@/components/ui/text"
import { fontSize, radius, useTheme } from "@/components/ui/theme"

const styles = StyleSheet.create({
  root: {
    width: "100%",
    minWidth: 0,
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    gap: 16,
    borderRadius: radius["2xl"],
    padding: 48,
  1. Update the import paths to match your project.

  1. Target iOS 17 or later.

  2. Copy the theme files every view uses:

swift/Theme/Theme.swift
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }
swift/Theme/Tokens.swift
import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))
  1. Copy the source and every file it uses:
swift/Components/Empty.swift
import SwiftUI

public struct Empty<Content: View>: View {
  let content: Content

  public init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

  public var body: some View {
    VStack(spacing: 16) {
      content
    }
    .multilineTextAlignment(.center)
    .padding(48)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
swift/Components/TextVariant.swift
import SwiftUI

public enum TextVariant: CaseIterable, Sendable {
  case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted

  var style: TextStyle {
    switch self {
    case .h1: .xl3
    case .h2: .xl2
    case .h3: .xl
    case .h4, .lead, .large: .lg
    case .code, .small, .muted: .sm
    default: .base
    }
  }
  1. Add the files to your app target.
  1. Set minSdk to 24 or higher and add the dependencies:
build.gradle.kts
implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")
  1. Copy the theme files every view uses:
kotlin/theme/Theme.kt
package com.esuiss.ui.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpOffset
kotlin/theme/Tokens.kt
package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,
    val primaryForeground: Color,
  1. Copy the source and every file it uses:
kotlin/components/Empty.kt
package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
kotlin/components/Content.kt
package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }
kotlin/components/Icon.kt
package com.esuiss.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.takeOrElse
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.Dp
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun Icon(
    imageVector: ImageVector,
  1. Update the com.esuiss.ui package names to match your project.

Usage

import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@/components/ui/empty"
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon as={FolderOpenIcon} />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>
      You haven't created any projects yet. Get started by creating your
      first project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>
      <Text>Create project</Text>
    </Button>
    <Button variant="link">
      <Text>Import project</Text>
    </Button>
  </EmptyContent>
</Empty>

EmptyMedia has two variants: default shows its child as is, such as an illustration, and icon puts an Icon in a small rounded tile. Put buttons or links in EmptyContent.

Add a background class such as bg-muted to Empty for a filled panel.

Examples

Muted

A filled panel with only a title and description.

iOS
Empty (muted) on iOS in light modeEmpty (muted) on iOS in dark mode
import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty"

export function EmptyMutedExample() {
  return (
    <Empty className="bg-muted">
      <EmptyHeader>
        <EmptyTitle>No results</EmptyTitle>
        <EmptyDescription>Try a different search.</EmptyDescription>
      </EmptyHeader>
    </Empty>
  )
}
import EsuissUI
import SwiftUI

struct EmptyMutedExample: View {
  var body: some View {
    Empty {
      EmptyHeader {
        EmptyTitle("No results")
        EmptyDescription("Try a different search.")
      }
    }
    .background(EsuissColor.muted, in: RoundedRectangle(cornerRadius: Radius.xl2, style: .continuous))
  }
}
import androidx.compose.foundation.background
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.Empty
import com.esuiss.ui.components.EmptyDescription
import com.esuiss.ui.components.EmptyHeader
import com.esuiss.ui.components.EmptyTitle
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius

@Composable
fun EmptyMuted() {
    Empty(Modifier.background(EsuissTheme.colors.muted, RoundedCornerShape(Radius.xl2))) {
        EmptyHeader {
            EmptyTitle("No results")
            EmptyDescription("Try a different search.")
        }
    }
}

API Reference

01

Empty

Centered container.

Also accepts the props of ViewProps.

02

EmptyHeader

Column for media, title and description.

Also accepts the props of ViewProps.

03

EmptyMedia

Decorative icon or illustration.

PropTypeDefaultDescription
variant"default" | "icon""default"default or icon.

Also accepts the props of ViewProps.

04

EmptyTitle

Heading.

Also accepts the props of React.ComponentProps<typeof Text>.

05

EmptyDescription

Supporting text.

Also accepts the props of React.ComponentProps<typeof Text>.

06

EmptyContent

Area for actions.

Also accepts the props of ViewProps.

Accessibility

  • EmptyTitle has the heading role.
  • EmptyMedia is hidden from screen readers, so the title and description must carry the message.

Notes

  • Uses bg-muted, text-foreground and text-muted-foreground tokens; light and dark follow the system appearance.
NextFABPreviousDropdown Menu

On this page

  1. 01Installation
    • CLI
    • Manual
  2. 02Usage
  3. 03Examples
    • Outline
    • Default media
    • With search
  4. 04API Reference
    • Empty
    • EmptyHeader
    • EmptyMedia
    • EmptyTitle
    • EmptyDescription
    • EmptyContent
  5. 05Accessibility
  6. 06Notes
  7. 07Installation
    • Manual
  8. 08Usage
  9. 09Examples
    • Muted
  10. 10API Reference
    • Empty
    • EmptyHeader
    • EmptyMedia
    • EmptyTitle
    • EmptyDescription
    • EmptyContent
  11. 11Accessibility
  12. 12Notes