Ripple

Adds a Material-style ink ripple on pointer press or Enter/Space. Attach ply-ripple to any host — buttons, cards, list rows, and custom surfaces.

freenew

Buttons

Works with ply-button and friends. Default ink is soft white for filled buttons.

HTML

<button ply-button color="primary" ply-ripple>Primary</button>
<button
  ply-stroked-button
  color="primary"
  ply-ripple
  rippleColor="rgba(59, 130, 246, 0.45)">
  Stroked
</button>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add ripple
// Paths are relative to aliases.components (default: src/app/components)
import { RippleDirective } from './ripple/ripple.directive';

@Component({
  selector: 'app-ripple-example',
  imports: [
    RippleDirective
  ],
  template: `...`
})
export class RippleExampleComponent {}

Install

bash

npx ply-ui-cli add ripple

Surfaces & color

On light backgrounds, set a dark rippleColor. Use rippleCentered to always expand from the middle.

HTML

<div
  ply-ripple
  rippleColor="rgba(15, 23, 42, 0.28)"
  class="rounded-xl bg-slate-50 p-8">
  Light surface
</div>

<div ply-ripple rippleCentered class="rounded-xl bg-slate-900 p-8">
  Centered
</div>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add ripple
// Paths are relative to aliases.components (default: src/app/components)
import { RippleDirective } from './ripple/ripple.directive';

@Component({
  selector: 'app-ripple-example',
  imports: [
    RippleDirective
  ],
  template: `...`
})
export class RippleExampleComponent {}

Install

bash

npx ply-ui-cli add ripple

Duration & disabled

Tune speed with rippleDuration (ms). Gate the effect with rippleDisabled, or rely on the native disabled attribute.

HTML

<button ply-button ply-ripple [rippleDuration]="900">Slow</button>
<button ply-button ply-ripple rippleDisabled>No ripple</button>
<button ply-button ply-ripple disabled>Disabled</button>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add ripple
// Paths are relative to aliases.components (default: src/app/components)
import { RippleDirective } from './ripple/ripple.directive';

@Component({
  selector: 'app-ripple-example',
  imports: [
    RippleDirective
  ],
  template: `...`
})
export class RippleExampleComponent {}

Install

bash

npx ply-ui-cli add ripple

Installation

Run the following command to add this directive to your project:

bash

npx ply-ui-cli add ripple

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add ripple
// Paths are relative to aliases.components (default: src/app/components)
import { RippleDirective } from './ripple/ripple.directive';

@Component({
  selector: 'app-your-component',
  imports: [
    RippleDirective
  ],
  template: `...`
})
export class YourComponent {}

API for ripple — generated from JSDoc in the library source.

API reference for ripple
API	Member	Type	Default	Description
`[ply-ripple]`	`rippleColor`	`unknown`	`DEFAULT_COLOR`	Ink color (any CSS color). Defaults to a soft white for filled buttons. Use a dark rgba on light surfaces.
`[ply-ripple]`	`rippleCentered`	`boolean`	`false`	Always originates from the host center instead of the pointer position.
`[ply-ripple]`	`rippleDisabled`	`boolean`	`false`	Disables ripple creation while leaving the directive attached.
`[ply-ripple]`	`rippleDuration`	`number`	`DEFAULT_DURATION`	Animation duration in milliseconds.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).