Plus UI

Cookie Consent UI (20 Variants)

Static cookie consent blocks for privacy preferences, consent actions, and policy messaging in Plus UI.

Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile

Cookies Blocks

Cookies blocks help product teams present consent options, policy context, and privacy actions in compact static patterns that can be adapted to real consent flows.

Key Features

  • Categorized cookie preferences with clear labels for necessary, analytics, and preference cookies
  • Static Plus UI toggle states that communicate the intended consent setting without preview scripts
  • Consent actions for allowing cookies, rejecting all cookies, or making changes
  • Compact banner variants with policy messaging and right-aligned consent actions
  • Centered third-party cookie consent cards with simple allow and decline actions
  • Purpose-led consent cards with icon rows for content improvement, safer experiences, and product functionality
  • Vertical preference panels with mixed enabled and disabled static toggle states
  • Policy links with accessible FontAwesome external-link indicators
  • Mobile-first layout that keeps one content structure across desktop, tablet, and mobile previews

Cookies #1

Cookies #1 is a cookie settings panel. The source design shows a bordered modal card with a title, explanatory copy, Learn More link, three enabled cookie categories, and a stacked action column. A muted footer below the card points users toward the Plus privacy policy.

Cookies #1 Data

  • Title: Cookie Settings
  • Description: We use cookies to ensure that we give you the best experience on our website.
  • Categories: Necessary cookies, Marketing & Analytics, Preferences
  • Category supporting copy: We use cookies to ensure.
  • Actions: Allow, Reject All, Make Changes
  • Footer: Read more about Plus privacy policy

Cookies #2

Cookies #2 is a compact cookie consent banner. The source design shows a bordered modal card with a cookie icon, concise consent copy, an underlined Cookies Policy link, and two right-aligned actions for accepting or managing cookies.

Cookies #2 Data

  • Title: We are using cookies to improve your experience!
  • Description: By clicking “Allow all”, you agree to use of all cookies. Visit our Cookies Policy to learn more.
  • Icon: Cookie bite
  • Actions: Allow All, Manage cookies

Cookies #3

Cookies #3 is a centered third-party cookie consent card. The source design shows a bordered modal card with a muted cookie icon badge, one centered personalization sentence, and two compact actions for allowing or declining cookies.

Cookies #3 Data

  • Message: We use third-party cookies in order to personalize your experience.
  • Icon: Cookie bite
  • Actions: Allow, Decline

Cookies #4

Cookies #4 is a purpose-led cookie consent card. The source design shows a bordered modal card with a direct consent question, two icon-supported purpose rows, a divider, a Cookies Policy link inside the explanatory copy, and equal Allow and Decline actions.

Cookies #4 Data

  • Title: Allow use of cookies ?
  • Purposes: Provide and improve content; Provide and improve HTML Stream products
  • Description: You can allow the use of all cookies, just essential cookies or you can choose more options below. you can learn more about cookies and how we use them, and review or change your choice at any time in our Cookies Policy.
  • Icons: Cookie bite, lock
  • Actions: Allow, Decline

Cookies #5

Cookies #5 is an expanded purpose-led cookie consent card. The source design shows a bordered modal card with a direct consent question, three icon-supported purpose rows, a divider, a Cookies Policy link inside the explanatory copy, and equal Allow and Decline actions.

Cookies #5 Data

  • Title: Allow use of cookies ?
  • Purposes: Provide and improve content; Provide a safer experience; Provide and improve HTML Stream products
  • Description: You can allow the use of all cookies, just essential cookies or you can choose more options below. you can learn more about cookies and how we use them, and review or change your choice at any time in our Cookies Policy.
  • Icons: Cookie bite, shield, lock
  • Actions: Allow, Decline

Cookies #6

Cookies #6 is a vertical cookie settings card. The source design shows a bordered modal card with a title, explanatory copy, Learn More link, divider, three stacked preference rows, one enabled Necessary cookies toggle, disabled Marketing & Analytics and Preferences toggles, and stacked consent actions.

Cookies #6 Data

  • Title: Cookie Settings
  • Description: We use cookies to ensure that we give you the best experience on our website.
  • Categories: Necessary cookies, Marketing & Analytics, Preferences
  • Category supporting copy: We use cookies to ensure that we give you the best experience on our website.
  • Toggle states: Necessary cookies enabled; Marketing & Analytics disabled; Preferences disabled
  • Actions: Allow, Reject All, Make Changes

Frequently Asked Questions

What is a cookies UI component? A cookies UI component is a reusable privacy interface for collecting or explaining website cookie consent.

Where are cookies blocks commonly used? Cookies blocks are commonly used in SaaS apps, marketing sites, account portals, dashboards, and public web applications that need consent or privacy preference messaging.

Should cookie controls be interactive in these examples? No. These block examples are static previews. Use visible toggle states and action buttons to communicate the intended design without adding scripts.

How should cookie policy links be shown? Policy links should stay visible, concise, and accessible, with token-colored link text and a small FontAwesome external-link indicator when the source design includes one.

Join to our newsletter

Join to our popular weekly newsletter Plus UI, packed with updates, tips on UX and get the latest news in your inbox.

Join now

© Plus UI 2026

Plus UI offers an integrated Design System and UI Library, featuring a versatile suite of components to elevate your development projects. We streamline the web app development process with fully customizable pre-built components, themes, and powerful integrations.

Our components are built on a centralized token architecture, ensuring consistency and efficiency across your design system and UI library. The UI Library's framework-agnostic technology allows seamless use of components across different frameworks. Optimized for speed, it offers fast loading times, high performance, and quick integration, making it the fastest component library for web applications. The token architecture ensures theming consistency, covering essential design aspects like Color, Typography, Icons, Borders, Spacing, Opacity, Shadows & Effects, and Breakpoints. Integrations with Tailwind CSS and Font Awesome enhance functionality. Ready-to-use themes include light and dark modes, with full customization to apply your branding. Plus UI is also compliant with WCAG 2.1 standards for accessible web design.

We have meticulously designed and developed a collection of 26 feature-rich core components, with over 2000 variants and more than 2000 free icons in our Freemium Plan. For more advanced needs, our Pro Plan provides access to professionally designed and developed components, blocks, and templates. Our core components include: Accordion, Alert, Avatar, Badge, Button, Button Group, Breadcrumb, Checkbox, Chip, Divider, Drawer, Dropdown, Input, Link, Modal, Progress, Popconfirm, Popover, Radio, Rating, Select, Tabs, Textarea, Toast, Toggle, and Tooltip. Advanced components feature Charts, Date & Time Pickers, Data Grids, and Tree Views. The Plus UI component library offers a robust and flexible solution for building user interfaces, with support for React, Vue.js, Angular, Svelte, Next.js, and other frameworks.

How We Differ from Other Market Providers:

Plus UI sets itself apart from other UI libraries and design systems. While systems like IBM's Carbon Design System excel in scalability for enterprise use, Plus UI integrates a centralized token system that unifies the design system and UI library, enhancing consistency and efficiency.

Unlike the Atlassian Design System, which focuses on simplicity for enterprise solutions, Plus UI provides a rich set of customizable and accessible components powered by Tailwind CSS and Font Awesome, ensuring a lightweight and flexible design framework.

The Figma Design System is known for its powerful collaboration features. Plus UI complements these by offering a meticulously organized suite of components compatible with Figma, allowing designers to leverage advanced features alongside our extensive library.

For Salesforce developers, the Lightning Design System offers robust tools. Plus UI provides similar robustness but extends its versatility by supporting multiple frameworks like React, Angular, Vue, and Svelte, making it adaptable to a wider range of applications.

The Airbnb Design System emphasizes user-centric principles. Plus UI builds on this with a centralized token system that enhances design coherence, ensuring all components adhere to consistent standards.

Apple’s Design System is celebrated for its sleek aesthetics and high performance. Plus UI matches this standard while providing a vast array of fully customizable and accessible components, including support for dark themes.

Atomic Design focuses on breaking down UIs into smaller, reusable components. Plus UI extends this approach with over 2000 variants and a rich set of properties and tokens, enabling efficient development of complex interfaces.

The IBM Design System is known for its comprehensive guidelines and accessibility. Plus UI offers user-friendly, accessible interfaces with detailed documentation and a component library that boosts productivity and design consistency.

The Salesforce Lightning Design System is optimized for Salesforce applications. Plus UI offers broader integrations, making it suitable for various frameworks beyond Salesforce, providing greater versatility.

Google's Material Design is a cohesive framework for responsive, mobile-first interfaces. Plus UI supports these principles but distinguishes itself with a lightweight package and a powerful combination of Tailwind CSS and Font Awesome for enhanced customization.

The Google Design System pioneered modern design principles. Plus UI builds on these by offering a comprehensive and highly adaptable system that caters to a broader range of needs.

The Uber Design System focuses on accessibility for a global user base. Plus UI shares this focus and expands on it by providing fully customizable components tailored to diverse user needs.

Microsoft's Fluent Design System emphasizes light, depth, and motion. Plus UI incorporates these principles while providing an extensive library of easy-to-use components for a seamless development process.

Finally, the Ant Design System is popular for its robust components in enterprise environments. Plus UI offers similar robustness but stands out with its centralized token system, extensive component library, and multi-framework compatibility, making it ideal for a wide range of applications.

In essence, Plus UI combines the strengths of these renowned design systems while offering unique features like a centralized token system, extensive customization, and framework-agnostic components, setting it apart as a versatile and powerful solution.

Plus UI Logo Plus UI

Copyright © 2026 Plus UI Inc. All rights reserved.