# Nuecrea UI

> Accessible UI components for Angular (22+) and Next.js (App Router, React 19+) with the same parts, data attributes and look in both. Styled with Tailwind CSS v4 and design tokens; components are copied into the app by a CLI, so the app owns the code.

Set up with `npx nuecrea-ui init`, then add components with `npx nuecrea-ui add <name>` (e.g. `dialog`). `nuecrea.json` in the app says which framework it uses and where the components live. Agent Skills: `npx nuecrea-ui skills install`.

## Components (React / Next.js)

- [Accordion](https://ui.nuecrea.com/llms/accordion-react.md): Stacked sections that expand and collapse; one open at a time unless multiple. Panel height animates via CSS.
- [Alert](https://ui.nuecrea.com/llms/alert-react.md): A callout for a short, important message, with an optional leading icon (an <svg> as Root's first child). No role by default, since a message already on the page when it loads shouldn't be announced; set `announce` when the alert appears in response to something.
- [Badge](https://ui.nuecrea.com/llms/badge-react.md): A short status or count label. Renders a <span>; it has no role or behaviour, so the text itself must make sense when read aloud.
- [Breadcrumb](https://ui.nuecrea.com/llms/breadcrumb-react.md): Shows where the current page sits in the site's hierarchy, as a list of links ending in the current page. Follows the APG breadcrumb pattern: a labelled nav landmark, an ordered list, and aria-current=page on the last item.
- [Button](https://ui.nuecrea.com/llms/button-react.md): Triggers an action. Renders a native <button> by default.
- [Button Group](https://ui.nuecrea.com/llms/button-group-react.md): Joins related Buttons into one visual unit with shared borders. A div with role=group: give it an aria-label. Every button stays its own tab stop; for arrow-key navigation between them use a toolbar instead.
- [Card](https://ui.nuecrea.com/llms/card-react.md): A bordered surface grouping related content, with optional header, content and footer areas. Layout only: no role or behaviour. Give Title a heading element (React `render={<h2 />}`, Angular `<h2 libCardTitle>`) when the card starts a section.
- [Checkbox](https://ui.nuecrea.com/llms/checkbox-react.md): A checkbox on a <span role=checkbox> with a hidden native input beside it for forms.
- [Dialog](https://ui.nuecrea.com/llms/dialog-react.md): A popup that opens on top of the page and blocks interaction with it while modal.
- [Field](https://ui.nuecrea.com/llms/field-react.md): A labelled form control with description and validation messages. Input is the control.
- [Menu](https://ui.nuecrea.com/llms/menu-react.md): A menu of actions opened from a button: roving focus, typeahead, checkbox and radio items, submenus.
- [Pagination](https://ui.nuecrea.com/llms/pagination-react.md): Links to the pages of a paged list. Presentational: the app supplies each link's href (or click handler) and marks the current page; `paginationRange(page, count, siblings)` from @nuecrea/core works out which page numbers and ellipses to show.
- [Popover](https://ui.nuecrea.com/llms/popover-react.md): A non-modal popup anchored to a trigger, positioned with flip/shift and an optional arrow.
- [Select](https://ui.nuecrea.com/llms/select-react.md): Pick one value from a list. By default the list opens with the selected option over the trigger.
- [Switch](https://ui.nuecrea.com/llms/switch-react.md): An on/off switch on a <span role=switch> with a hidden native input beside it for forms. The thumb slides with a spring-eased CSS transition.
- [Table](https://ui.nuecrea.com/llms/table-react.md): A styled native table. All semantics come from the elements themselves (rows, header cells, caption), so screen-reader table navigation works as usual. No sorting, selection or pagination: that's a data table.
- [Tabs](https://ui.nuecrea.com/llms/tabs-react.md): Tabs with manual activation, roving focus and an animated indicator.
- [Textarea](https://ui.nuecrea.com/llms/textarea-react.md): A multi-line text control that grows with its content (CSS field-sizing, so a fixed height in browsers without it). Works alone or inside a Field, with the same labelling, validation and data attributes as Input; set rows or a max height with classes.
- [Toast](https://ui.nuecrea.com/llms/toast-react.md): Stacked notifications driven by an imperative manager (add, update, close, promise): limit, timers that pause on hover/focus, keyboard access via F6, swipe to dismiss.
- [Tooltip](https://ui.nuecrea.com/llms/tooltip-react.md): A short label shown on hover (after a delay) or keyboard focus. Touch is ignored. No ARIA is added; give the trigger its own accessible name.
- [3D Marquee](https://ui.nuecrea.com/llms/3d-marquee-react.md): A wall of images on a plane tilted in 3D, its four columns drifting up and down in opposite directions. Images lift on hover. Plain CSS animation; under reduced motion the wall stands still.
- [Gradient Wave](https://ui.nuecrea.com/llms/gradient-wave-react.md): An animated WebGL gradient of three colors folding into soft waves, with film grain, after gradflow's stripe gradient. Use it as a background: content goes inside, on top. Pauses offscreen; under reduced motion it draws one still frame.

## Components (Angular)

- [Accordion](https://ui.nuecrea.com/llms/accordion-angular.md): Stacked sections that expand and collapse; one open at a time unless multiple. Panel height animates via CSS.
- [Alert](https://ui.nuecrea.com/llms/alert-angular.md): A callout for a short, important message, with an optional leading icon (an <svg> as Root's first child). No role by default, since a message already on the page when it loads shouldn't be announced; set `announce` when the alert appears in response to something.
- [Badge](https://ui.nuecrea.com/llms/badge-angular.md): A short status or count label. Renders a <span>; it has no role or behaviour, so the text itself must make sense when read aloud.
- [Breadcrumb](https://ui.nuecrea.com/llms/breadcrumb-angular.md): Shows where the current page sits in the site's hierarchy, as a list of links ending in the current page. Follows the APG breadcrumb pattern: a labelled nav landmark, an ordered list, and aria-current=page on the last item.
- [Button](https://ui.nuecrea.com/llms/button-angular.md): Triggers an action. Renders a native <button> by default.
- [Button Group](https://ui.nuecrea.com/llms/button-group-angular.md): Joins related Buttons into one visual unit with shared borders. A div with role=group: give it an aria-label. Every button stays its own tab stop; for arrow-key navigation between them use a toolbar instead.
- [Card](https://ui.nuecrea.com/llms/card-angular.md): A bordered surface grouping related content, with optional header, content and footer areas. Layout only: no role or behaviour. Give Title a heading element (React `render={<h2 />}`, Angular `<h2 libCardTitle>`) when the card starts a section.
- [Checkbox](https://ui.nuecrea.com/llms/checkbox-angular.md): A checkbox on a <span role=checkbox> with a hidden native input beside it for forms.
- [Dialog](https://ui.nuecrea.com/llms/dialog-angular.md): A popup that opens on top of the page and blocks interaction with it while modal.
- [Field](https://ui.nuecrea.com/llms/field-angular.md): A labelled form control with description and validation messages. Input is the control.
- [Menu](https://ui.nuecrea.com/llms/menu-angular.md): A menu of actions opened from a button: roving focus, typeahead, checkbox and radio items, submenus.
- [Pagination](https://ui.nuecrea.com/llms/pagination-angular.md): Links to the pages of a paged list. Presentational: the app supplies each link's href (or click handler) and marks the current page; `paginationRange(page, count, siblings)` from @nuecrea/core works out which page numbers and ellipses to show.
- [Popover](https://ui.nuecrea.com/llms/popover-angular.md): A non-modal popup anchored to a trigger, positioned with flip/shift and an optional arrow.
- [Select](https://ui.nuecrea.com/llms/select-angular.md): Pick one value from a list. By default the list opens with the selected option over the trigger.
- [Switch](https://ui.nuecrea.com/llms/switch-angular.md): An on/off switch on a <span role=switch> with a hidden native input beside it for forms. The thumb slides with a spring-eased CSS transition.
- [Table](https://ui.nuecrea.com/llms/table-angular.md): A styled native table. All semantics come from the elements themselves (rows, header cells, caption), so screen-reader table navigation works as usual. No sorting, selection or pagination: that's a data table.
- [Tabs](https://ui.nuecrea.com/llms/tabs-angular.md): Tabs with manual activation, roving focus and an animated indicator.
- [Textarea](https://ui.nuecrea.com/llms/textarea-angular.md): A multi-line text control that grows with its content (CSS field-sizing, so a fixed height in browsers without it). Works alone or inside a Field, with the same labelling, validation and data attributes as Input; set rows or a max height with classes.
- [Toast](https://ui.nuecrea.com/llms/toast-angular.md): Stacked notifications driven by an imperative manager (add, update, close, promise): limit, timers that pause on hover/focus, keyboard access via F6, swipe to dismiss.
- [Tooltip](https://ui.nuecrea.com/llms/tooltip-angular.md): A short label shown on hover (after a delay) or keyboard focus. Touch is ignored. No ARIA is added; give the trigger its own accessible name.
- [3D Marquee](https://ui.nuecrea.com/llms/3d-marquee-angular.md): A wall of images on a plane tilted in 3D, its four columns drifting up and down in opposite directions. Images lift on hover. Plain CSS animation; under reduced motion the wall stands still.
- [Gradient Wave](https://ui.nuecrea.com/llms/gradient-wave-angular.md): An animated WebGL gradient of three colors folding into soft waves, with film grain, after gradflow's stripe gradient. Use it as a background: content goes inside, on top. Pauses offscreen; under reduced motion it draws one still frame.

## Guides

- [Installation](https://ui.nuecrea.com/docs/installation/): the CLI and its options
- [Theming](https://ui.nuecrea.com/docs/theming/): tokens, dark mode, client themes
- [Tokens](https://ui.nuecrea.com/llms/tokens.md): every design token and its default
- [Motion](https://ui.nuecrea.com/docs/motion/): animations and reduced motion

## Optional

- [Full reference](https://ui.nuecrea.com/llms-full.txt): every page above in one file