Published source aligned with the DesignMyUI interface foundation.
Published Oct 11, 2026Thoughtful by default.
Accessible, responsive foundations for your next interface.
Yours to make your own.
Change the colors, spacing, and typography to fit your project.
Free · MIT license
Soft Accordion
Give every detail a little room to unfold.
- Styling
- inline CSS
- Delivery
- Reusable React component
Add it to your project
pnpm dlx shadcn@latest add "https://designmyui.dev/r/soft-accordion?version=1.0.1"Uses React and inline CSS. No additional runtime libraries. Installation guide ↗
♡ Save to favorites
Free source is public. Sign in to keep this version in your library.
Source & usage
The source below is checked against this release’s published SHA-256 hash before delivery. Copy the file or use the registry.
/**
* Copyright (c) 2026 DesignMyUI
* SPDX-License-Identifier: MIT
*/
export function SoftAccordion({
items = [
{
title: "Thoughtful by default.",
content: "Accessible, responsive foundations for your next interface.",
},
{
title: "Yours to make your own.",
content:
"Change the colors, spacing, and typography to fit your project.",
},
],
}: {
items?: { title: string; content: string }[];
}) {
return (
<div style={{ width: "100%", maxWidth: 310, display: "grid", gap: 8 }}>
{items.map((item) => (
<details
key={item.title}
style={{
background: "#ffffffd9",
border: "1px solid #e8e3ed",
borderRadius: 12,
padding: "14px 16px",
textAlign: "left",
}}
>
<summary
style={{
cursor: "pointer",
fontSize: 12,
fontWeight: 500,
color: "#4e4659",
}}
>
{item.title}
</summary>
<p
style={{
fontSize: 12,
lineHeight: 1.7,
color: "#75697f",
marginTop: 12,
}}
>
{item.content}
</p>
</details>
))}
</div>
);
}
Use it in your interface
Interactive handlers belong in a React client component. Replace the content and props with your own.
import { SoftAccordion } from "./soft-accordion";
<SoftAccordion items={[
{ title: "What is included?", content: "Your answer goes here." },
]} />Published versions
Each download keeps its original source. Choose a release to inspect and download that exact version.
Initial published source.
Published Oct 11, 2026