Mcoli UI - MC Collapsible

Overview

The mc-collapsible component shows or hides a single panel. It uses the @base-ui/react collapsible primitive for accessible behavior and leaves visual styling to the consumer.

Preview

@peduarte starred 3 repositories

@radix-ui/primitives

import type { ComponentProps } from 'react';import { ChevronsUpDown } from 'lucide-react';import { McCollapsible, McCollapsibleContent, McCollapsibleTrigger } from '../ui/mc-collapsible';export default function McCollapsibleDemo(props: ComponentProps<typeof McCollapsible>) {  return (    <McCollapsible {...props} className="w-[350px] space-y-2">      <div className="flex items-center justify-between gap-4 px-4">        <h4 className="paragraph-sm font-semibold text-foreground">          @peduarte starred 3 repositories        </h4>        <McCollapsibleTrigger className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50">          <ChevronsUpDown className="size-4" />          <span className="sr-only">Toggle repositories</span>        </McCollapsibleTrigger>      </div>      <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">        @radix-ui/primitives      </div>      <McCollapsibleContent className="space-y-2">        <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">          @radix-ui/colors        </div>        <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">          @stitches/react        </div>      </McCollapsibleContent>    </McCollapsible>  );}

Add to Your Project

npx mcoli-ui@latest add mc-collapsible

pnpm dlx mcoli-ui@latest add mc-collapsible

yarn dlx mcoli-ui@latest add mc-collapsible

bunx mcoli-ui@latest add mc-collapsible

Manual Setup

Install the dependency

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

bun add @base-ui/react

Copy the source code

'use client';import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';function McCollapsible({ ...props }: CollapsiblePrimitive.Root.Props) {  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;}function McCollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;}function McCollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {  return <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />;}export { McCollapsible, McCollapsibleTrigger, McCollapsibleContent };

Usage

import {
  McCollapsible,
  McCollapsibleContent,
  McCollapsibleTrigger,
} from '@/components/ui/mc-collapsible';

export default function Example() {
  return (
    <McCollapsible>
      <McCollapsibleTrigger>Toggle collapse</McCollapsibleTrigger>
      <McCollapsibleContent>Details are shown when the panel is open.</McCollapsibleContent>
    </McCollapsible>
  );
}

Controlled State

Use open and onOpenChange to control the component state.

'use client';

import * as React from 'react';
import {
  McCollapsible,
  McCollapsibleContent,
  McCollapsibleTrigger,
} from '@/components/ui/mc-collapsible';

export default function ControlledExample() {
  const [open, setOpen] = React.useState(false);

  return (
    <McCollapsible open={open} onOpenChange={setOpen}>
      <McCollapsibleTrigger>{open ? 'Hide' : 'Show'} details</McCollapsibleTrigger>
      <McCollapsibleContent>Controlled panel content.</McCollapsibleContent>
    </McCollapsible>
  );
}

API Reference

McCollapsible

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial state when uncontrolled
`open`	`boolean`	`-`	Controlled open state
`onOpenChange`	`(open: boolean) => void`	`-`	Called when the open state changes
`disabled`	`boolean`	`false`	Prevents the trigger from toggling

McCollapsibleTrigger

Accepts all Base UI collapsible trigger props, including render for custom trigger elements.

McCollapsibleContent

Accepts all Base UI collapsible panel props, including keepMounted and hiddenUntilFound.

MC Collapsible

@peduarte starred 3 repositories

On this page

@peduarte starred 3 repositories