Features Security
Trust section with certification seals, the controls behind them and a live uptime gauge.
- Type: Features section
- Styles: Enterprise, Dark
- Licence: Charcoal UI Pro
About Features Security
Features Security answers the questions a security review will ask: certification seals that stamp in, a live uptime gauge and a grid of the controls behind them, from encryption to audit logs.
It is a full-width features section for React and Tailwind CSS 4, in a enterprise and dark style. Preview it at any width above, then install it with one command.
When to use Features Security
- B2B SaaS selling to enterprise.
- Fintech, health and regulated products.
- Infrastructure and developer platforms.
- Trust centre pages.
How it is built
Seals animate once with a spring, the uptime number uses Gauge with a narrow range so 99.99% reads clearly, and seals and controls are props.
It is composed from Gauge, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Features Security
Features Security is part of 8 full templates, so you can see it in a finished page.
- Tessera template: Every meeting, already written up.
- Sable template: Enterprise security without the theatre.
- Lane template: Catch the bug in review, not in prod.
- Tidepool template: Postgres that scales to zero and back.
- Keystone template: Login, done in an afternoon.
- Ledger template: Bookkeeping that reads like a newspaper.
- Vault template: Save without thinking about it.
- Rota template: Shift planning, built by nurses.
- Features Grid: A React features grid of six cards with a pointer spotlight and staggered reveal
- Features Bento: A React bento features section where every tile is a working component
- Features Alternating: A free React alternating features section: image and text rows that slide in
- Features Tabs: React feature tabs that auto-advance with a progress bar and swap visuals
- Gauge: An animated React dial gauge with colour bands and a springy needle
Install Features Security
npx shadcn@latest add @charcoal/features-securityFeatures Security is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Features Security work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.
Built from
- Gauge: A dial gauge with colour bands and tick marks whose needle swings to the value on an underdamped spring, overshooting a touch, while the readout counts along.