Primitivedata-display

Item

Stable

Linha de lista: mídia, título, descrição e ações no fim, em três variantes e três densidades. A decisão que ele carrega é o que a linha É. Como div, é um contêiner e os controles dentro são os alvos; como `a` ou `button`, ela vira um alvo só, e aí nada focalizável pode morar dentro — um botão dentro de um link é um alvo que o teclado alcança e o ponteiro não consegue mirar com honestidade.

Instalação

npx up-web-ds add item

Preview

Default

primitives/button

A intenção semântica vive em variant e a densidade em size.

stable

With Media

Foundation

Tokens, tipografia e a escala de motion: o tema deste repositório, que o projeto consumidor não herda.

Registry de consumo

Publica apenas itens stable, e exclui os restricted por DS004.

Variants

default

Mesma estrutura, moldura diferente.

outline

Mesma estrutura, moldura diferente.

muted

Mesma estrutura, moldura diferente.

size default

O grupo aperta o próprio espaçamento junto com as linhas.

size sm

O grupo aperta o próprio espaçamento junto com as linhas.

size xs

O grupo aperta o próprio espaçamento junto com as linhas.

All states

Default

primitives/button

A intenção semântica vive em variant e a densidade em size.

stable

As Link

primitives/select

Abre um popup, mas a função é escolher um valor.

primitives/dialog

A superfície modal de referência do sistema.

primitives/drawer

Superfície de borda que acompanha o dedo.

With Media

Foundation

Tokens, tipografia e a escala de motion: o tema deste repositório, que o projeto consumidor não herda.

Registry de consumo

Publica apenas itens stable, e exclui os restricted por DS004.

Variants

default

Mesma estrutura, moldura diferente.

outline

Mesma estrutura, moldura diferente.

muted

Mesma estrutura, moldura diferente.

size default

O grupo aperta o próprio espaçamento junto com as linhas.

size sm

O grupo aperta o próprio espaçamento junto com as linhas.

size xs

O grupo aperta o próprio espaçamento junto com as linhas.

Usage

Imports de Item
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from '@/components/ui/item'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
Item
<Item variant="outline" className="w-full max-w-lg">
  <ItemContent>
    <ItemTitle>primitives/button</ItemTitle>
    <ItemDescription>
      A intenção semântica vive em variant e a densidade em size.
    </ItemDescription>
  </ItemContent>
  <ItemActions>
    <Badge>stable</Badge>
    <Button size="sm" variant="ghost">
      Instalar
    </Button>
  </ItemActions>
</Item>

Props

ItemGroup

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

ItemSeparator

Props de ItemSeparator
PropTypeDefaultDescription
decorativebooleansem valor padrão
classNamestring | ((state: SeparatorState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
orientationOrientation'horizontal'The orientation of the separator.
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
styleReact.CSSProperties | ((state: SeparatorState) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.

Estende React.ComponentProps<typeof Separator>. Aceita também os atributos padrão de um elemento React (275 não listados).

Item

Props de Item
PropTypeDefaultDescription
size"default" | "sm" | "xs" | null'default'
variant"default" | "outline" | "muted" | null'default'
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Estende useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>. Aceita também os atributos padrão de um elemento React (280 não listados).

ItemMedia

Props de ItemMedia
PropTypeDefaultDescription
variant"image" | "default" | "icon" | null'default'

Estende React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>. Aceita também os atributos padrão de um elemento React (280 não listados).

ItemContent

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

ItemTitle

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

ItemDescription

Estende React.ComponentProps<'p'>. Aceita também os atributos padrão de um elemento React (280 não listados).

ItemActions

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

ItemHeader

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

Composition

Um Item sozinho é uma linha; o ItemGroup existe quando há uma lista delas. Media, conteúdo e ações são as três colunas da linha.

Composição de Item

Item

  • ItemMedia
  • ItemContent
    • ItemTitle
    • ItemDescription
  • ItemActions

Metadata

Notas de acessibilidade

Teclado verificado por teste: como contêiner a linha não entra na sequência de tabulação e os alvos são os controles dentro dela; como link ela vira um Tab stop só, com título e descrição dentro do mesmo alvo em vez de virarem uma segunda parada. Leitor de tela verificado por teste: no modo link o nome acessível é tudo que está dentro da linha, o grupo não inventa semântica de lista — quem precisa de ul e li diz isso por `render` — e um separador entre linhas pode ser decorativo, para não anunciar uma régua por linha. Touch verificado em navegador com emulação de toque em viewport de 375px: a linha inteira é o alvo no modo link, os controles das ações medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 mesmo na densidade xs, e os textos truncam por line-clamp em vez de vazar. Reduced motion verificado com prefers-reduced-motion: reduce — a transição de cor, em duration-fast, não é movimento e permanece: remover uma transição de cor não acomoda ninguém e custa a única pista que o estado tem. Nenhum deslocamento existe aqui para ser desligado.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
data-display
Status
Stable

Origem e distribuição

Fonte
shadcn registry / item
Licença
MIT
URL
https://ui.shadcn.com/r/styles/base-vega/item.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
@base-ui/react, class-variance-authority
Ícones
Nenhum
Construído sobre
Separator
Usado por
Nenhum ainda