Accordion

The Accordion component provides you with expandable sections for FAQ and content organization.

Import

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@nostromo/ui-core'
// or
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@nostromo/ui-core/accordion'

Usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@nostromo/ui-core'
 
export default function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>What is Nostromo UI?</AccordionTrigger>
        <AccordionContent>
          Nostromo UI is a comprehensive UI library.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@nostromo/ui-core' export default function AccordionExample() { return ( <Accordion type="single" collapsible> <AccordionItem value="item-1"> <AccordionTrigger>What is Nostromo UI?</AccordionTrigger> <AccordionContent> Nostromo UI is a comprehensive UI library built with React, TypeScript and Tailwind CSS. </AccordionContent>...

Multiple Items

Live Example

☀️

Copy

Storybook →

View Code

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@nostromo/ui-core' export default function MultipleAccordion() { return ( <Accordion type="multiple"> <AccordionItem value="item-1"> <AccordionTrigger>Section 1</AccordionTrigger> <AccordionContent>Content in section 1</AccordionContent> </AccordionItem> <AccordionItem value="item-2">...

Props

Accordion

Prop	Type	Default	Required	Description
`type`	`"single" \| "multiple"`	`"single"`	No	Whether single or multiple items can be open
`collapsible`	`boolean`	`false`	No	Whether items can be closed (only for single type)
`value`	`string \| string[]`	`undefined`	No	Active item value(s) (controlled)
`defaultValue`	`string \| string[]`	`undefined`	No	Default active item value(s) (uncontrolled)
`onValueChange`	`(value: string \| string[]) => void`	`undefined`	No	Callback when active item changes
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Accordion items

AccordionItem

Prop	Type	Default	Required	Description
`value`	`string`	-	Yes	Unique value for this item
`disabled`	`boolean`	`false`	No	Whether the item is disabled
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Item content (AccordionTrigger, AccordionContent)

AccordionTrigger

Prop	Type	Default	Required	Description
`disabled`	`boolean`	`false`	No	Whether the trigger is disabled
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Trigger content

AccordionContent

Prop	Type	Default	Required	Description
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Content to display when expanded

Avatar Calendar