Asks once whether analytics may run, then folds to a one line confirmation.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/consent-cardPlayground
Asking
Accepted
Declined
State
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/consent-card
Accessibility
- A labelled region, not a dialog, so it does not trap focus.
- After an answer, focus moves to the Close Button on the confirmation, which is announced as a status.
- Decline stays as easy to reach as Accept.
Motion
- Rises 12 px and fades in over 240 ms.
- An answer folds the card to one line with a spring.
- Hides itself after 4 s.
- With reduced motion, it only fades.
Responsive behavior
- 352 px on Web and 358 px on Mobile.
- On Mobile, Buttons grow to 52 px and share the width, and copy grows to 16 px.
Performance
- Only one layer is mounted at a time: the question, or the one line answer.
- The hide timer is cleared on unmount. Pass hideAfter={0} to skip it.
- After closing, the card renders nothing.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import ConsentCard from @/components/fetaui/consent-card.
- Save the answer in onValueChange. Nothing is stored for you, and analytics must not load before the answer.
- placement="corner" floats it bottom left on Web and docks it on Mobile. The default is inline.
- For several cookie categories use Cookie Banner. Composes Card, Button and Icon Button.
Related
Cookie BannerComponentAsks once at the bottom of the page. Reject all and Accept all carry the same weight.Cookie PreferencesComponentChoose which optional cookies run. A popover on Web and a bottom sheet on Mobile.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.AlertComponentA callout that asks for attention without taking over the page. Card, Inline and Banner in six tones.ToastComponentA short message that melts from a pill into a card. Eight kinds, with stacking and swipe.