The container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.
Preview
npx shadcn add @fetaui/cardWeekend in Lisbon
Three days of trams, tiles and long lunches by the river.
Weekend in Lisbon
Three days of trams, tiles and long lunches by the river.
Weekend in Lisbon
Three days of trams, tiles and long lunches by the river.
Weekend in Lisbon
Three days of trams, tiles and long lunches by the river.
Weekend in Lisbon
Three days of trams, tiles and long lunches by the river.
$10 a month
$96 a year
Weekend in Lisbon
Three days of trams, tiles and long lunches by the river.
Weekend in Lisbon
Three days of trams, tiles and long lunches by the river.
Weekend in Lisbon
Three days of trams, tiles and long lunches by the river.
Weekend in Lisbon
Three days of trams, tiles and long lunches by the river.
Installation
npx shadcn add @fetaui/card
Tray
The default: an inset card on a 4% tray, with actions on the tray.
Weekend in Lisbon
Three days of trams, tiles and long lunches by the river.
Accessibility
- An article, or a list item with
as="li", named by its title. - A clickable card has one link on the title stretched over the card, not a wrapping button. Its own Buttons stay separate targets.
- A selectable card uses aria-pressed.
- Loading sets aria-busy and makes the hidden content inert.
Motion
- Clickable cards lift 1 px in 150 ms, and the tray and ring deepen.
- Press scales to 0.99 in 100 ms and springs back on release.
- Select moves the ring to ink and pops the check in.
- Skeletons crossfade to content in 240 ms, and the height stays locked.
- With reduced motion, only colour changes.
Responsive behavior
- Fills its column: 340 px is the reference on Web and 358 px on Mobile.
- On Mobile, Buttons on the tray grow one size and share the full width.
Performance
- Media, header, meta and footer skip their markup when empty.
- The skeleton mounts only while loading is true, with its shimmer off. The real content stays in place, inert, so the height does not change.
- The check mounts only while selected. animated={false} or reduced motion turns off the lift, press and pop.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Card and CardMedia from @/components/fetaui/card after installing it.
- Pass href for a link or onPress for a button. The title stretches over the card, so do not wrap Card in a link.
- selected only means something with onPress, which adds aria-pressed. Without it, the check is decoration.
- CardMedia is a placeholder scene. Replace it with an image. Composes Skeleton and the check icon.