# Ndop UI > Accessible Angular components you install as source files: Tailwind-styled directives on headless, signals-first primitives, with a CLI that adds them to your app and merges upstream fixes into the files you changed. Every page is also available as Markdown at its URL plus `.md`. https://ndop.dev/llms-full.txt has all of them in one file. ## Guides - [Introduction](https://ndop.dev/docs/getting-started/introduction.md): What Ndop UI is, and how it differs from a component library you install as a package. - [Installation](https://ndop.dev/docs/getting-started/installation.md): Set up Ndop UI in an Angular CLI, Nx or Analog app, then add your first component. - [Theming](https://ndop.dev/docs/getting-started/theming.md): How Ndop's design tokens work, and how to change colors, radius and fonts. - [Dark mode](https://ndop.dev/docs/getting-started/dark-mode.md): Switch between light, dark and the operating system's scheme, without a flash on load. - [CLI](https://ndop.dev/docs/getting-started/cli.md): The ndop command, its options, and how it keeps every change previewable and repeatable. - [ndop.json](https://ndop.dev/docs/getting-started/ndop-json.md): The project configuration ndop init writes, and every field it can contain. - [Agents & MCP](https://ndop.dev/docs/getting-started/agents-mcp.md): How Ndop helps coding agents use its components correctly, with project guidance, an MCP server and a verify loop. - [Verify](https://ndop.dev/docs/getting-started/verify.md): ndop verify checks components and pages that use Ndop, for people and for agents, and says exactly what to fix. - [Migrating from Angular Material](https://ndop.dev/docs/getting-started/migrating-from-angular-material.md): Move an Angular Material app to Ndop one screen at a time, with a map of components, the theming equivalents and the CDK both build on. - [Migrating from spartan/shadcn](https://ndop.dev/docs/getting-started/migrating-from-spartan-shadcn.md): Bring Ndop into an app that uses spartan/ui or shadcn-style components, keep your theme, and let ndop take over files you copied. - [Roadmap](https://ndop.dev/docs/getting-started/roadmap.md): What Ndop plans after 1.0, what waits on a condition, and what it leaves out on purpose. - [Build your own registry](https://ndop.dev/docs/patterns/build-your-own-registry.md): Publish your own components as a registry that ndop installs, public or private, from any static host. ## Components - [Accordion](https://ndop.dev/docs/components/accordion.md): A stack of headed sections that each show or hide their content. - [Alert](https://ndop.dev/docs/components/alert.md): Displays a callout that draws the user's attention. - [Alert Dialog](https://ndop.dev/docs/components/alert-dialog.md): A modal dialog that interrupts with an important question, such as confirming a deletion, and expects an answer. - [Aspect Ratio](https://ndop.dev/docs/components/aspect-ratio.md): Displays content within a chosen width-to-height ratio. - [Avatar](https://ndop.dev/docs/components/avatar.md): Displays a user's image, with a fallback while it loads or when it fails. - [Badge](https://ndop.dev/docs/components/badge.md): Displays a badge or a component that looks like a badge. - [Breadcrumb](https://ndop.dev/docs/components/breadcrumb.md): Shows the path to the current page in a hierarchy of pages. - [Button](https://ndop.dev/docs/components/button.md): Displays a button or a component that looks like a button. - [Calendar](https://ndop.dev/docs/components/calendar.md): Month grids to choose a date, a range or several dates. - [Card](https://ndop.dev/docs/components/card.md): Displays a card with a header, content and footer. - [Chart](https://ndop.dev/docs/components/chart.md): SVG charts you own: bar, line, area, pie and radial, with tooltips and legends. - [Checkbox](https://ndop.dev/docs/components/checkbox.md): A control that's checked, unchecked or mixed, for choosing an option on its own or several from a list. - [Collapsible](https://ndop.dev/docs/components/collapsible.md): Shows and hides a section of content. - [Combobox](https://ndop.dev/docs/components/combobox.md): A text field that filters a list of options as the user types. - [Command](https://ndop.dev/docs/components/command.md): A search field over a list of commands, filtered as the user types. - [Context Menu](https://ndop.dev/docs/components/context-menu.md): A menu of actions that a right click or long press on an area opens, at the pointer. - [Data Table](https://ndop.dev/docs/components/data-table.md): A table of rows to sort, search, page through and select, on signals. - [Date Picker](https://ndop.dev/docs/components/date-picker.md): A button that opens a calendar in a popover to pick a date or a range. - [Dialog](https://ndop.dev/docs/components/dialog.md): A window overlaid on the primary window, rendering the content underneath inert. - [Drawer](https://ndop.dev/docs/components/drawer.md): A panel that slides up from the bottom of the screen and can be dragged away, suited to phones. - [Dropdown Menu](https://ndop.dev/docs/components/dropdown-menu.md): A menu of actions or options that a button opens, such as a row's actions in a table. - [Empty State](https://ndop.dev/docs/components/empty.md): Shows that there is nothing here yet, and what to do about it. - [Form Field](https://ndop.dev/docs/components/form-field.md): Lays out a form control with its label, description and error, and links them for assistive technology. - [Hover Card](https://ndop.dev/docs/components/hover-card.md): A preview of what's behind a link, shown to pointer and keyboard users while they hover or focus it. - [Input](https://ndop.dev/docs/components/input.md): Displays a form input field. - [Input OTP](https://ndop.dev/docs/components/input-otp.md): Enters a one-time code, digit by digit, in one field that autofill and screen readers understand. - [Label](https://ndop.dev/docs/components/label.md): Renders an accessible label associated with controls. - [Menubar](https://ndop.dev/docs/components/menubar.md): A bar of menus, such as a desktop app's File and Edit menus. - [Navigation Menu](https://ndop.dev/docs/components/navigation-menu.md): A site's navigation: links and buttons that show panels of links. - [Pagination](https://ndop.dev/docs/components/pagination.md): Navigates between pages of results. - [Popover](https://ndop.dev/docs/components/popover.md): Displays rich content in a portal, triggered by a button. - [Progress](https://ndop.dev/docs/components/progress.md): Displays how far a task has got. - [Radio Group](https://ndop.dev/docs/components/radio-group.md): A set of options of which one at most is chosen, navigated with the arrow keys. - [Resizable](https://ndop.dev/docs/components/resizable.md): Panels that share space, resized by dragging or with the keyboard. - [Scroll Area](https://ndop.dev/docs/components/scroll-area.md): A scrollable region with styled scrollbars. - [Select](https://ndop.dev/docs/components/select.md): A button that shows a value and opens a list of options to pick from. - [Separator](https://ndop.dev/docs/components/separator.md): Visually or semantically separates content. - [Sheet](https://ndop.dev/docs/components/sheet.md): A dialog that slides in from an edge of the screen, for secondary content such as settings or filters. - [Sidebar](https://ndop.dev/docs/components/sidebar.md): A collapsible side panel for an app's navigation, which becomes a dialog on small screens. - [Skeleton](https://ndop.dev/docs/components/skeleton.md): Shows a placeholder while content loads. - [Slider](https://ndop.dev/docs/components/slider.md): Picks a number, or a range with two thumbs, by dragging along a track or with the arrow keys. - [Spinner](https://ndop.dev/docs/components/spinner.md): Shows that something is loading. - [Switch](https://ndop.dev/docs/components/switch.md): An on/off control that takes effect right away, such as a setting. - [Table](https://ndop.dev/docs/components/table.md): Displays tabular data with responsive styles. - [Tabs](https://ndop.dev/docs/components/tabs.md): Layered sections of content, shown one at a time. - [Textarea](https://ndop.dev/docs/components/textarea.md): Displays a multi-line text field, or a component that looks like one. - [Toast](https://ndop.dev/docs/components/toast.md): A brief message about an action, shown in a corner without interrupting, such as Saved or Message sent. - [Toggle](https://ndop.dev/docs/components/toggle.md): A button that stays pressed or released, such as Bold in a text editor. - [Toggle Group](https://ndop.dev/docs/components/toggle-group.md): A set of toggle buttons of which one or several are pressed, such as text alignment or formatting. - [Tooltip](https://ndop.dev/docs/components/tooltip.md): A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it. ## Primitives - [Accordion](https://ndop.dev/docs/primitives/accordion.md): Headless Accordion: the behavior, keyboard support and ARIA of the WAI-ARIA Accordion pattern, with no styles. - [Alert Dialog](https://ndop.dev/docs/primitives/alert-dialog.md): Headless Alert Dialog: the behavior, keyboard support and ARIA of the WAI-ARIA Alert and Message Dialogs pattern, with no styles. - [Avatar](https://ndop.dev/docs/primitives/avatar.md): Headless Avatar: the behavior, keyboard support and ARIA of the WAI-ARIA `img` element's pattern, with no styles. - [Button](https://ndop.dev/docs/primitives/button.md): Headless Button: the behavior, keyboard support and ARIA of the WAI-ARIA Button pattern, with no styles. - [Calendar](https://ndop.dev/docs/primitives/calendar.md): Headless Calendar: the behavior, keyboard support and ARIA of the WAI-ARIA Date grid pattern, with no styles. - [Checkbox](https://ndop.dev/docs/primitives/checkbox.md): Headless Checkbox: the behavior, keyboard support and ARIA of the WAI-ARIA Checkbox pattern, with no styles. - [Collapsible](https://ndop.dev/docs/primitives/collapsible.md): Headless Collapsible: the behavior, keyboard support and ARIA of the WAI-ARIA Disclosure (Show/Hide) pattern, with no styles. - [Combobox](https://ndop.dev/docs/primitives/combobox.md): Headless Combobox: the behavior, keyboard support and ARIA of the WAI-ARIA Editable combobox with list autocomplete pattern, with no styles. - [Command](https://ndop.dev/docs/primitives/command.md): Headless Command: the behavior, keyboard support and ARIA of the WAI-ARIA Combobox pattern, with no styles. - [Context Menu](https://ndop.dev/docs/primitives/context-menu.md): Headless Context Menu: the behavior, keyboard support and ARIA of the WAI-ARIA Menu pattern, with no styles. - [Dialog](https://ndop.dev/docs/primitives/dialog.md): Headless Dialog: the behavior, keyboard support and ARIA of the WAI-ARIA Dialog (Modal) pattern, with no styles. - [Drawer](https://ndop.dev/docs/primitives/drawer.md): Headless Drawer: the behavior, keyboard support and ARIA of the WAI-ARIA Dialog (Modal) pattern, with no styles. - [Dropdown Menu](https://ndop.dev/docs/primitives/dropdown-menu.md): Headless Dropdown Menu: the behavior, keyboard support and ARIA of the WAI-ARIA Menu Button pattern, with no styles. - [Form Field](https://ndop.dev/docs/primitives/form-field.md): Headless Form Field: the behavior, keyboard support and ARIA of the WAI-ARIA `aria-describedby` pattern, with no styles. - [Hover Card](https://ndop.dev/docs/primitives/hover-card.md): Headless Hover Card: the behavior, keyboard support and ARIA of its pattern, with no styles. - [Input](https://ndop.dev/docs/primitives/input.md): Headless Input: the behavior, keyboard support and ARIA of its pattern, with no styles. - [Input OTP](https://ndop.dev/docs/primitives/input-otp.md): Headless Input OTP: the behavior, keyboard support and ARIA of its pattern, with no styles. - [Label](https://ndop.dev/docs/primitives/label.md): Headless Label: the behavior, keyboard support and ARIA of its pattern, with no styles. - [Menu](https://ndop.dev/docs/primitives/menu.md): Headless Menu: the behavior, keyboard support and ARIA of the WAI-ARIA Menu pattern, with no styles. - [Menubar](https://ndop.dev/docs/primitives/menubar.md): Headless Menubar: the behavior, keyboard support and ARIA of the WAI-ARIA Menubar pattern, with no styles. - [Navigation Menu](https://ndop.dev/docs/primitives/navigation-menu.md): Headless Navigation Menu: the behavior, keyboard support and ARIA of the WAI-ARIA Disclosure navigation pattern, with no styles. - [Popover](https://ndop.dev/docs/primitives/popover.md): Headless Popover: the behavior, keyboard support and ARIA of the WAI-ARIA dialog role pattern, with no styles. - [Progress](https://ndop.dev/docs/primitives/progress.md): Headless Progress: the behavior, keyboard support and ARIA of the WAI-ARIA progressbar role pattern, with no styles. - [Radio Group](https://ndop.dev/docs/primitives/radio-group.md): Headless Radio Group: the behavior, keyboard support and ARIA of the WAI-ARIA Radio Group pattern, with no styles. - [Resizable](https://ndop.dev/docs/primitives/resizable.md): Headless Resizable: the behavior, keyboard support and ARIA of the WAI-ARIA Window Splitter pattern, with no styles. - [Select](https://ndop.dev/docs/primitives/select.md): Headless Select: the behavior, keyboard support and ARIA of the WAI-ARIA Select-only combobox pattern, with no styles. - [Separator](https://ndop.dev/docs/primitives/separator.md): Headless Separator: the behavior, keyboard support and ARIA of the WAI-ARIA separator role pattern, with no styles. - [Sidebar](https://ndop.dev/docs/primitives/sidebar.md): Headless Sidebar: the behavior, keyboard support and ARIA of the WAI-ARIA Dialog (modal) pattern, with no styles. - [Slider](https://ndop.dev/docs/primitives/slider.md): Headless Slider: the behavior, keyboard support and ARIA of the WAI-ARIA Slider pattern, with no styles. - [Switch](https://ndop.dev/docs/primitives/switch.md): Headless Switch: the behavior, keyboard support and ARIA of the WAI-ARIA Switch pattern, with no styles. - [Tabs](https://ndop.dev/docs/primitives/tabs.md): Headless Tabs: the behavior, keyboard support and ARIA of the WAI-ARIA Tabs pattern, with no styles. - [Toast](https://ndop.dev/docs/primitives/toast.md): Headless Toast: the behavior, keyboard support and ARIA of the WAI-ARIA live region pattern, with no styles. - [Toggle](https://ndop.dev/docs/primitives/toggle.md): Headless Toggle: the behavior, keyboard support and ARIA of the WAI-ARIA Button pattern, with no styles. - [Toggle Group](https://ndop.dev/docs/primitives/toggle-group.md): Headless Toggle Group: the behavior, keyboard support and ARIA of the WAI-ARIA toggle buttons pattern, with no styles. - [Tooltip](https://ndop.dev/docs/primitives/tooltip.md): Headless Tooltip: the behavior, keyboard support and ARIA of the WAI-ARIA Tooltip pattern, with no styles. ## Blocks - [Login 01](https://ndop.dev/blocks/login-01.md): A sign-in form in a card, with email and password. - [Login 02](https://ndop.dev/blocks/login-02.md): A two-column sign-in page with the form beside an image. - [Signup 01](https://ndop.dev/blocks/signup-01.md): A sign-up form in a card, validated with Signal Forms. - [Dashboard 01](https://ndop.dev/blocks/dashboard-01.md): A dashboard of stat cards, an area chart and a table of recent orders. - [Dashboard 02](https://ndop.dev/blocks/dashboard-02.md): An analytics dashboard with tabs for overview, reports and notifications. - [Settings 01](https://ndop.dev/blocks/settings-01.md): A settings page with profile and account forms. - [Settings 02](https://ndop.dev/blocks/settings-02.md): A settings page of notification switches and a danger zone. - [Data Table 01](https://ndop.dev/blocks/data-table-01.md): A table of tasks to search, filter, sort, page through and select, with actions per row. - [Sidebar 01](https://ndop.dev/blocks/sidebar-01.md): An app shell with a sidebar of grouped links. - [Sidebar 02](https://ndop.dev/blocks/sidebar-02.md): An app shell whose sidebar collapses to icons and opens as a sheet on mobile. - [Hero 01](https://ndop.dev/blocks/hero-01.md): A hero section with a headline, two actions and a product shot. - [Pricing 01](https://ndop.dev/blocks/pricing-01.md): Pricing plans with a monthly or yearly billing toggle.