react.dev
useState – React
useState is a React Hook that lets you add a state variable to your component. Call useState at the top level of your component to declare a state variable.
useState is a React Hook that lets you add a state variable to your component. Call useState at the top level of your component to declare a state variable.
import { Citation } from "@/components/tool-ui/citation";export function Example() { return ( <Citation id="citation-example" href="https://react.dev/reference/react/useState" title="useState – React" snippet="useState is a React Hook that lets you add a state variable to your component." domain="react.dev" favicon="https://www.google.com/s2/favicons?domain=react.dev&sz=32" type="document" /> );}Display title, domain, author, and publication date
Show relevant excerpts from the source
Default card, inline chips, or stacked favicons
Full keyboard navigation for stacked variant popover
Copy components/tool-ui/citation and the shared directory into your project.
pnpm dlx shadcn@latest add button tooltip popoverProp
Type
The stacked variant popover supports full keyboard navigation:
Mouse users can hover to reveal the popover. All variants open links in new tabs with noopener,noreferrer for security.
import { Citation } from "@/components/tool-ui/citation";
export function Example() {
return (
<Citation
id="citation-example"
href="https://react.dev/reference/react/useState"
title="useState – React"
snippet="useState is a React Hook that lets you add a state variable to your component."
domain="react.dev"
favicon="https://www.google.com/s2/favicons?domain=react.dev&sz=32"
type="document"
/>
);
}pnpm dlx shadcn@latest add button tooltip popover