Collapsible

Ply collapsible is one disclosure: a trigger and a region that expands in place. Copy collapsible in, put ply-collapsible-trigger on a button, and project the body in ply-collapsible-content. It is not an accordion — stacked exclusive sections are accordion.

When to use

Show/hide shipping notes, extra filters, or optional copy on a single control.
When only one region opens and closes, with no sibling panels to coordinate.

When not to use

Several headings that should open one at a time (or several) — use accordion.
A slide-in overlay — use drawer or bottom-sheet.

Install with npx ply-ui-cli add collapsible.

free

View source

One disclosure

Arrives in 2–4 days. Signature required over $200.

HTML

<ply-collapsible>
  <button ply-collapsible-trigger>Show shipping notes</button>
  <ply-collapsible-content>Arrives in 2–4 days.</ply-collapsible-content>
</ply-collapsible>

TypeScript

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

// Install: npx ply-ui-cli add collapsible
// Paths are relative to aliases.components (default: src/app/components)
import { CollapsibleContentComponent } from './collapsible/collapsible-content.component';
import { CollapsibleTriggerDirective } from './collapsible/collapsible-trigger.directive';
import { CollapsibleComponent } from './collapsible/collapsible.component';

@Component({
  selector: 'app-collapsible-example',
  imports: [
    CollapsibleComponent,
    CollapsibleContentComponent,
    CollapsibleTriggerDirective
  ],
  template: `...`
})
export class CollapsibleExampleComponent {}

Install

bash

npx ply-ui-cli add collapsible

Installation

bash

npx ply-ui-cli add collapsible

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 collapsible
// Paths are relative to aliases.components (default: src/app/components)
import { CollapsibleContentComponent } from './collapsible/collapsible-content.component';
import { CollapsibleTriggerDirective } from './collapsible/collapsible-trigger.directive';
import { CollapsibleComponent } from './collapsible/collapsible.component';

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

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

API reference for collapsible
API	Member	Type	Default	Description
`ply-collapsible`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-collapsible`	`open`	`boolean`	`false`	Two-way open state.
`ply-collapsible-content`	`—`	`—`	—	Body of a `ply-collapsible`. Hidden when the parent is closed.
`[ply-collapsible-trigger]`	`—`	`—`	—	Toggles the parent `ply-collapsible`. Put it on a native `button`.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 217 components and blocks (127 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).