{variants.map(([variant, title, description]) => (
{title}
{description}
))}
);
}
```
### Without a title [#without-a-title]
`AlertTitle` is optional. Drop it and `AlertDescription` moves up to the first row, so a one-line alert lines up with its icon instead of sitting under an empty title row.
```tsx
{(["sm", "md", "lg"] as const).map((size) => (
{size.toUpperCase()}
Inherited size scale
))}
);
}
```
## Props [#props]
| Prop/API | Type | Default | Description |
| --------------------------------- | ---------------------------- | -------------------- | ------------------------------------------------------------------------ |
| `BarChart` `config` | `ChartConfig` | `{}` | Series labels/icons for the shared tooltip and legend. |
| `BarChart` `data` | `object[]` | - | One row per category. |
| `BarChart` `size` | `"sm" \| "md" \| "lg"` | inherited | Plot height, axis type, value labels, gaps, and radius scale. |
| `BarChart` `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Visual bar direction. Horizontal maps to Recharts `layout="vertical"`. |
| `BarChartGrid` props | `CartesianGrid` props | `vertical={false}` | Reference gridlines using `var(--color-line)`. |
| `BarChartXAxis` / `BarChartYAxis` | Recharts axis props | giddaa axis defaults | No axis/tick lines, size-scaled tick labels, and reserved Y-axis width. |
| `BarChartSeries` `dataKey` | `string` | - | Field holding the series value. |
| `BarChartSeries` `color` | CSS color | `chart-1` token | Bar fill in one prop; `fill` still wins if passed directly. |
| `BarValueLabel` `orientation` | `"vertical" \| "horizontal"` | inherited | Positions labels above vertical bars or to the right of horizontal bars. |
| `BarValueLabel` `formatter` | `(value) => ReactNode` | - | Formats displayed bar label values. |
| native/root props | Recharts component props | - | Passed through to the wrapped Recharts primitive. |
## Accessibility [#accessibility]
* Keep `accessibilityLayer` on (the default) so the plot is keyboard-navigable and screen-reader labelled.
* Start quantitative bar axes at zero; a truncated baseline misrepresents magnitude.
* Add `ChartLegend` whenever more than one series renders; do not rely on color alone.
* Prefer horizontal bars when category labels are long or the chart is a ranked list.
* Avoid 3-D, skewed, or pill-shaped bars; use flat rectangles with a small leading-edge radius.
# Breadcrumb (/docs/components/breadcrumb)
## Quick Preview [#quick-preview]
```tsx title="examples/breadcrumb-default-demo.tsx"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@giddaa-housing/ui/breadcrumb";
export default function BreadcrumbDefaultDemo() {
return (
{(["sm", "md", "lg", "xl"] as const).map((size) => (
))}
{(["icon-xs", "icon-sm", "icon", "icon-lg", "icon-xl"] as const).map(
(size) => (
),
)}
);
}
```
### Loading and Disabled [#loading-and-disabled]
Use `isLoading` when an action is in flight. It disables the button and shows progress without changing layout.
```tsx title="examples/button-loading-demo.tsx"
import { Button } from "@giddaa-housing/ui/button";
export default function ButtonLoadingDemo() {
return (
Estimated completion: 3 minutes
You can save your progress and return at any time.
Estimated completion: 3 minutes
You can save your progress and return at any time.
{houses.map((house) => {
const isSelected = selectedHouses.includes(house.id);
const checkboxId = `select-house-${house.id}`;
return (
Select {house.name}
}
aria-label={`Select ${house.name}`}
/>
{house.name}
{house.location}
);
})}
);
}
```
### Selection with an Explicit Button [#selection-with-an-explicit-button]
Use a button when selection should be a deliberate action rather than an implicit card click. Pass the same state to `Card.selected` and the button's `aria-pressed` attribute.
```tsx title="examples/card-button-selection-demo.tsx"
"use client";
import { Avatar, AvatarFallback, AvatarImage } from "@giddaa-housing/ui/avatar";
import { Button } from "@giddaa-housing/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@giddaa-housing/ui/card";
import { useState } from "react";
const customers = [
{
id: "ada",
name: "Ada Okafor",
email: "ada.okafor@example.com",
meta: "2 active applications",
initials: "AO",
image:
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=240&q=80",
},
{
id: "tunde",
name: "Tunde Balogun",
email: "tunde.b@example.com",
meta: "Customer since 2024",
initials: "TB",
image:
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=240&q=80",
},
{
id: "amina",
name: "Amina Yusuf",
email: "amina.yusuf@example.com",
meta: "1 active application",
initials: "AY",
image:
"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=240&q=80",
},
];
export default function CardButtonSelectionDemo() {
const [selectedCustomer, setSelectedCustomer] = useState("ada");
return (
{isSelected ? "Selected" : "Select"}
toggleHouse(house.id, checked)}
aria-label={`Select ${house.name}`}
className="pointer-events-auto bg-canvas"
/>
{house.details}
{house.price}
{customers.map((customer) => {
const isSelected = selectedCustomer === customer.id;
return (
{customer.initials}
{customer.name}
{customer.email}
{customer.meta}
);
})}
);
}
```
### Single Selection with Radio Cards [#single-selection-with-radio-cards]
Use a `RadioGroup` when exactly one option can be selected. Each `CardAction` is rendered as a label so the full card selects its associated radio item.
```tsx title="examples/card-radio-selection-demo.tsx"
"use client";
import {
Card,
CardAction,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@giddaa-housing/ui/card";
import { RadioGroup, RadioGroupItem } from "@giddaa-housing/ui/radio-group";
import { useState } from "react";
const homes = [
{
id: "townhouse",
name: "The Townhouse",
location: "Banana Island, Lagos",
price: "From ₦240m",
image:
"https://images.unsplash.com/photo-1600566752355-35792bedcfea?auto=format&fit=crop&w=1000&q=80",
},
{
id: "bungalow",
name: "Garden Bungalow",
location: "Asokoro, Abuja",
price: "From ₦175m",
image:
"https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1000&q=80",
},
];
export default function CardRadioSelectionDemo() {
const [selectedHome, setSelectedHome] = useState("townhouse");
return (
Apartment
Duplex
Terrace
Apartment
Duplex
Terrace
{label}
{applicant.name}
event.stopPropagation()}
>
{applicant.email}
);
},
header: "Buyer",
id: "name",
meta: { isPinned: true, pinPosition: "left", useAsCardTitle: true },
},
{
accessorKey: "id",
header: "Customer ID",
},
{
accessorKey: "email",
header: "Email",
size: 280,
},
{
accessorKey: "status",
header: "Status",
cell: ({ row }) => (
Track applicant status, budget, source, and ownership.
{(["sm", "md", "lg"] as const).map((size) => (
))}
);
}
```
### Nested dialogs [#nested-dialogs]
Render a Dialog inside another — e.g. a discard confirmation over an edit form. The parent scales back under a light, blur-free backdrop so it stays visible behind the child, and clicking outside the top dialog closes it.
The Dialog roots must be nested in the React tree for this visual relationship.
Sibling roots are independent and do not produce the stacking effect, even if
both dialogs are open at the same time. Portalling the popup does not break its
React-tree nesting.
```tsx title="examples/dialog-nested-demo.tsx"
import { Button } from "@giddaa-housing/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogIcon,
DialogTitle,
DialogTrigger,
} from "@giddaa-housing/ui/dialog";
import { TriangleAlertIcon } from "lucide-react";
export default function DialogNestedDemo() {
return (
);
}
```
### Without the nesting effect [#without-the-nesting-effect]
Set `nestingEffect="none"` on both participating content surfaces when the
second dialog should behave as a focused overlay without moving its parent.
The parent keeps its position and close control, while the child uses the
normal strong, blurred overlay.
```tsx title="examples/dialog-nesting-opt-out-demo.tsx"
import { Button } from "@giddaa-housing/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@giddaa-housing/ui/dialog";
import {
Sheet,
SheetBody,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@giddaa-housing/ui/sheet";
export default function DialogNestingOptOutDemo() {
return (
Size
{sizes.map((value) => (
))}
{(["sm", "md", "lg"] as const).map((size) => (
View details
Duplicate
Delete
))}
);
}
```
## Props [#props]
| Prop/API | Type | Default | Description | | |
| ----------------- | --------------------- | --------------- | --------------------------------------------------- | --------------- | --------------------------- |
| `size` | \`"sm" | "md" | "lg"\` | `"md"` | Controls menu item density. |
| `variant` on item | \`"default" | "destructive"\` | `"default"` | Sets item tone. | |
| `className` | `string` | - | Local layout or spacing overrides. | | |
| native/root props | React component props | - | Passed through to the underlying root or primitive. | | |
## Accessibility [#accessibility]
* Preserve the documented DropdownMenu composition so labels, triggers, content, and controls remain connected.
* Provide visible labels or accessible names for interactive controls.
* Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
* Do not communicate state with color alone; include text, icons, or helper copy.
# Dropzone (/docs/components/dropzone)
## Quick Preview [#quick-preview]
```tsx title="examples/dropzone-default-demo.tsx"
import {
Dropzone,
DropzoneArea,
DropzoneDescription,
DropzoneIcon,
DropzoneInput,
DropzoneTitle,
DropzoneTrigger,
} from "@giddaa-housing/ui/dropzone";
export default function DropzoneDefaultDemo() {
return (
-
{accepted.map((name) => (
- ✓ {name} ))}
-
{errors.map((message) => (
- {message} ))}
{label}
{serialized}
)}
{serialized}
)}
Plot 5, Admiralty Way,
Lekki Phase 1, Lagos, Nigeria
© 2026 Giddaa Inc. All rights reserved.
Plot 5, Admiralty Way,
Lekki Phase 1, Lagos, Nigeria
© 2026 Giddaa Inc. All rights reserved.