
```jsx
import { CSidebar } from '@coreui/react'
// or
import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
```

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| **className** | A string of all className you want applied to the component. | `string` | - |
| **colorScheme** | Sets if the color of text should be colored for a light or dark dark background. | `'dark'` \| `'light'` | - |
| **narrow** | Make sidebar narrow. | `boolean` | - |
| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
| **onVisibleChange** | Event emitted after visibility of component changed. | `(visible: boolean) => void` | - |
| **overlaid** | Set sidebar to overlaid variant. | `boolean` | - |
| **placement** | Components placement, there’s no default placement. | `'start'` \| `'end'` | - |
| **position** | Place sidebar in non-static positions. | `'fixed'` \| `'sticky'` | - |
| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - |
| **unfoldable** | Expand narrowed sidebar on hover. | `boolean` | - |
| **visible** | Toggle the visibility of sidebar component. | `boolean` | - |
