` + `` compound when the image needs a caption.",
"npmDependencies": [
"react@>=18 <20"
],
"registryDependencies": [
"theme"
],
"files": [
{
"name": "Image.tsx",
"target": "src/ui/image/Image.tsx",
"url": "https://design.freecodecamp.org/registry/image/Image.tsx"
},
{
"name": "image.css",
"target": "src/ui/image/image.css",
"url": "https://design.freecodecamp.org/registry/image/image.css"
}
],
"docs": "https://design.freecodecamp.org/components/image.md"
},
{
"name": "input",
"kind": "component",
"title": "Input",
"category": "form",
"description": "The baseline single-line text control. Forwards every native input prop, adds an `invalid` flag that syncs `aria-invalid`.",
"npmDependencies": [
"react@>=18 <20"
],
"registryDependencies": [
"theme"
],
"files": [
{
"name": "Input.tsx",
"target": "src/ui/input/Input.tsx",
"url": "https://design.freecodecamp.org/registry/input/Input.tsx"
},
{
"name": "input.css",
"target": "src/ui/input/input.css",
"url": "https://design.freecodecamp.org/registry/input/input.css"
}
],
"docs": "https://design.freecodecamp.org/components/input.md"
},
{
"name": "link",
"kind": "component",
"title": "Link",
"category": "primitive",
"description": "The styled anchor primitive. Wraps `` with the UIKit hover/focus ring and a `block` flag for full-width link rows.",
"npmDependencies": [
"react@>=18 <20"
],
"registryDependencies": [
"theme"
],
"files": [
{
"name": "Link.tsx",
"target": "src/ui/link/Link.tsx",
"url": "https://design.freecodecamp.org/registry/link/Link.tsx"
},
{
"name": "link.css",
"target": "src/ui/link/link.css",
"url": "https://design.freecodecamp.org/registry/link/link.css"
}
],
"docs": "https://design.freecodecamp.org/components/link.md"
},
{
"name": "listbox",
"kind": "component",
"title": "Listbox",
"category": "navigation",
"description": "Scrollable single- or multi-select list. Ships a React layer for controlled state and a data-uikit-listbox adapter with full keyboard navigation and type-ahead for the vanilla runtime.",
"npmDependencies": [
"react@>=18 <20"
],
"registryDependencies": [
"theme"
],
"files": [
{
"name": "Listbox.tsx",
"target": "src/ui/listbox/Listbox.tsx",
"url": "https://design.freecodecamp.org/registry/listbox/Listbox.tsx"
},
{
"name": "listbox.css",
"target": "src/ui/listbox/listbox.css",
"url": "https://design.freecodecamp.org/registry/listbox/listbox.css"
}
],
"docs": "https://design.freecodecamp.org/components/listbox.md"
},
{
"name": "modal",
"kind": "component",
"title": "Modal",
"category": "overlay",
"description": "An accessible dialog with backdrop, focus trap, and escape-to-close. Controlled component - you own the `open` state.",
"npmDependencies": [
"react@>=18 <20",
"@ark-ui/react@^5.0.0"
],
"registryDependencies": [
"theme"
],
"files": [
{
"name": "Modal.tsx",
"target": "src/ui/modal/Modal.tsx",
"url": "https://design.freecodecamp.org/registry/modal/Modal.tsx"
},
{
"name": "modal.css",
"target": "src/ui/modal/modal.css",
"url": "https://design.freecodecamp.org/registry/modal/modal.css"
}
],
"docs": "https://design.freecodecamp.org/components/modal.md"
},
{
"name": "navbar",
"kind": "component",
"title": "Navbar",
"category": "navigation",
"description": "Top-of-page chrome with start, center, and end slots. Responsive collapse at the md breakpoint (768 px) so the center band wraps below the start and end rows on narrow screens.",
"npmDependencies": [
"react@>=18 <20"
],
"registryDependencies": [
"theme"
],
"files": [
{
"name": "Navbar.tsx",
"target": "src/ui/navbar/Navbar.tsx",
"url": "https://design.freecodecamp.org/registry/navbar/Navbar.tsx"
},
{
"name": "navbar.css",
"target": "src/ui/navbar/navbar.css",
"url": "https://design.freecodecamp.org/registry/navbar/navbar.css"
}
],
"docs": "https://design.freecodecamp.org/components/navbar.md"
},
{
"name": "pagination",
"kind": "component",
"title": "Pagination",
"category": "navigation",
"description": "Page navigator for tabular and paged content. Ships a React layer for app code and a data-uikit-pagination adapter for the vanilla runtime - both speak the same DOM contract so the layers stay swappable.",
"npmDependencies": [
"react@>=18 <20"
],
"registryDependencies": [
"theme"
],
"files": [
{
"name": "Pagination.tsx",
"target": "src/ui/pagination/Pagination.tsx",
"url": "https://design.freecodecamp.org/registry/pagination/Pagination.tsx"
},
{
"name": "pagination.css",
"target": "src/ui/pagination/pagination.css",
"url": "https://design.freecodecamp.org/registry/pagination/pagination.css"
}
],
"docs": "https://design.freecodecamp.org/components/pagination.md"
},
{
"name": "panel",
"kind": "component",
"title": "Panel",
"category": "data-display",
"description": "A lightweight surface for grouping related controls or metadata - the same BEM surface Card uses, but without header/footer ceremony.",
"npmDependencies": [
"react@>=18 <20"
],
"registryDependencies": [
"theme"
],
"files": [
{
"name": "Panel.tsx",
"target": "src/ui/panel/Panel.tsx",
"url": "https://design.freecodecamp.org/registry/panel/Panel.tsx"
},
{
"name": "panel.css",
"target": "src/ui/panel/panel.css",
"url": "https://design.freecodecamp.org/registry/panel/panel.css"
}
],
"docs": "https://design.freecodecamp.org/components/panel.md"
},
{
"name": "radio",
"kind": "component",
"title": "Radio",
"category": "form",
"description": "Native radio input with label wrapper and RadioGroup context for single-choice selection. Pairs with Fieldset for semantic grouping.",
"npmDependencies": [
"react@>=18 <20"
],
"registryDependencies": [
"theme"
],
"files": [
{
"name": "Radio.tsx",
"target": "src/ui/radio/Radio.tsx",
"url": "https://design.freecodecamp.org/registry/radio/Radio.tsx"
},
{
"name": "radio.css",
"target": "src/ui/radio/radio.css",
"url": "https://design.freecodecamp.org/registry/radio/radio.css"
}
],
"docs": "https://design.freecodecamp.org/components/radio.md"
},
{
"name": "select",
"kind": "component",
"title": "Select",
"category": "form",
"description": "Native HTML select restyled to fit the terminal shell. A real