Omnira UI — Premium Glassmorphism Components

Accordion (Single)

Only one item can be open at a time. Clicking another closes the current one.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Multiple Open

Multiple items can be expanded simultaneously.

Omnira UI is a premium glassmorphism component library built with React, TypeScript, and CSS Modules.

Run pnpm add omnira-ui to install the package, then import the components you need.

Standalone

CollapseItem can be used without a group — each manages its own state.

This item works independently without a CollapseGroup wrapper.

Usage

Import CollapseGroup and CollapseItem.

tsx
import { CollapseGroup, CollapseItem } from "@/components/ui/Collapse";

// Accordion (single open)
<CollapseGroup defaultOpen={["faq1"]}>
    <CollapseItem id="faq1" title="Question A">
        Answer A...
    </CollapseItem>
    <CollapseItem id="faq2" title="Question B">
        Answer B...
    </CollapseItem>
</CollapseGroup>

// Multiple open
<CollapseGroup multiple>
    <CollapseItem id="a" title="Section A">...</CollapseItem>
    <CollapseItem id="b" title="Section B">...</CollapseItem>
</CollapseGroup>

CollapseGroup Props

Props

Prop	Type	Default	Description
multiple	`boolean`	false	Allow multiple items open at once.
defaultOpen	`string[]`	[]	IDs of items open by default.
children	`ReactNode`	—	CollapseItem children.

CollapseItem Props

Props

Prop	Type	Default	Description
id	`string`	—	Unique identifier (required).
title	`string`	—	Header text (required).
defaultOpen	`boolean`	false	Open by default (standalone mode only).
children	`ReactNode`	—	Content shown when expanded.