# BEEQ Design System

> BEEQ is a white-label open-source design system created at Endava that accelerates the building of digital products with the goal of providing a UI Library of components and guidelines to help designers and developers produce high-quality solutions.

## Docs

- [About BEEQ](https://www.beeq.design/about/overview.md): Meet the team behind BEEQ and learn how we help Endava teams design and build consistent, accessible digital products.
- [Accordion](https://www.beeq.design/components/accordion.md): Accordions let users show and hide sections of related content on a page.
- [Alert](https://www.beeq.design/components/alert.md): An alert conveys status, progress, or required next steps to the user in a clear, contextual message.
- [Avatar](https://www.beeq.design/components/avatar.md): Avatars represent a person, team, or entity using a profile image or initials.
- [Badge](https://www.beeq.design/components/badge.md): Badges provide a compact visual indicator for status, presence, or counts tied to another UI element.
- [Breadcrumb](https://www.beeq.design/components/breadcrumb.md): A breadcrumb shows users their current location within a site hierarchy and lets them navigate back through parent levels.
- [Button](https://www.beeq.design/components/button.md): Buttons trigger actions in the current context. Button labels express what action will occur when the user interacts with it.
- [Card](https://www.beeq.design/components/card.md): Cards are flexible containers that group related content and actions into a single scannable unit.
- [Checkbox](https://www.beeq.design/components/checkbox.md): Checkboxes let people select one or more independent options, or confirm a single yes-or-no choice.
- [Date Picker](https://www.beeq.design/components/date-picker.md): Date pickers help users select a single date, a date range, or multiple dates from a calendar interface with less effort and fewer formatting errors.
- [Dialog](https://www.beeq.design/components/dialog.md): Dialogs present focused content or decisions that temporarily interrupt the current flow until the user responds or dismisses them.
- [Divider](https://www.beeq.design/components/divider.md): A divider visually separates related content so users can scan layout groups, sections, and lists more easily.
- [Drawer](https://www.beeq.design/components/drawer.md): Drawers are off-canvas panels that slide in from a screen edge to show secondary content, navigation, or actions without leaving the current page.
- [Dropdown](https://www.beeq.design/components/dropdown.md): Dropdowns provide users with a compact and organized list of options, actions, or destinations from a trigger.
- [Empty State](https://www.beeq.design/components/empty-state.md): Empty states explain why content is missing and help people understand what to do next.
- [Icon](https://www.beeq.design/components/icon.md): Icons provide compact visual cues that help people recognize actions, statuses, navigation, and meaning across an interface.
- [Input](https://www.beeq.design/components/input.md): Inputs collect short-form user data such as names, email addresses, passwords, codes, and search terms through a single-line field.
- [Notification](https://www.beeq.design/components/notification.md): Notifications deliver important information to users in a non-intrusive way, surfacing system messages, status updates, and alerts without interrupting the current flow.
- [Option](https://www.beeq.design/components/option.md): Options are individual selectable items rendered inside a list, dropdown, or navigation menu, each carrying a label, an optional icon prefix, and an optional icon suffix.
- [Option Group](https://www.beeq.design/components/option-group.md): Option Group is a labelled container that organizes related options into named sections inside a list or dropdown.
- [Option List](https://www.beeq.design/components/option-list.md): Option List is a listbox container that groups one or more Option items and surfaces a selection event when the user clicks or activates any of them.
- [Page title](https://www.beeq.design/components/page-title.md): Page titles help people understand where they are in a product and can surface related navigation, context, and actions.
- [Progress](https://www.beeq.design/components/progress.md): Progress bars visually represent the completion status of a task or process, giving users real-time feedback on how much has been done and what remains.
- [Radio](https://www.beeq.design/components/radio.md): Radio buttons let users select exactly one option from a set of mutually exclusive choices.
- [Select](https://www.beeq.design/components/select.md): The select input lets users choose one or more options from a predefined list, commonly used in forms for easy data selection.
- [Side Menu](https://www.beeq.design/components/side-menu.md): Side menus provide persistent vertical navigation for applications with multiple sections, features, or hierarchy levels.
- [Slider](https://www.beeq.design/components/slider.md): Sliders let users pick a value or range by dragging a handle along a horizontal track, useful for volume, brightness, price, and similar controls.
- [Spinner](https://www.beeq.design/components/spinner.md): Spinners communicate that work is in progress when content is loading, a request is processing, or the exact completion time is unknown.
- [Status](https://www.beeq.design/components/status.md): Statuses communicate the state or condition of an item, task, or process using a compact visual indicator and label.
- [Steps](https://www.beeq.design/components/steps.md): Steps display a series of stages in a process so users can understand progress, current status, and what comes next.
- [Switch](https://www.beeq.design/components/switch.md): Switches are digital on/off toggles that give users immediate, visible control over a single binary setting without requiring form submission.
- [Tab](https://www.beeq.design/components/tab.md): Tabs organize related content into separate panels under a single view, letting users switch between sections without navigating away from the page.
- [Table](https://www.beeq.design/components/table.md): Tables organize structured data in rows and columns so people can scan records, compare values, sort, and identify patterns across a dataset.
- [Tag](https://www.beeq.design/components/tag.md): Tags are concise elements that let users input information, make selections, filter content, or initiate actions within a user interface.
- [Textarea](https://www.beeq.design/components/textarea.md): Textareas are multi-line input fields for collecting longer free-form content such as comments, messages, feedback, or descriptions in forms.
- [Toast](https://www.beeq.design/components/toast.md): Toasts provide short, time-based feedback about an action or system state without interrupting the current task.
- [Tooltip](https://www.beeq.design/components/tooltip.md): A small pop-up box that provides additional information or context when a user hovers over or clicks on an element.
- [Colors](https://www.beeq.design/foundations/colors.md): BEEQ's color system is built in two tiers — a raw primitive palette and semantic tokens that name colors by their intended role, not their appearance.
- [Grid](https://www.beeq.design/foundations/grid.md): BEEQ grid guidance helps teams structure responsive layouts with consistent columns, gutters, margins, and spacing.
- [Radius](https://www.beeq.design/foundations/radius.md): BEEQ radius defines how corners behave across components, surfaces, and custom UI built with the design system.
- [Shadows](https://www.beeq.design/foundations/shadows.md): BEEQ shadows define elevation, layering, and separation for surfaces that need to appear above the page.
- [Spacing](https://www.beeq.design/foundations/spacing.md): BEEQ spacing defines the rhythm between elements, sections, and layouts using a shared 4px-based scale.
- [Stroke](https://www.beeq.design/foundations/stroke.md): BEEQ stroke defines border widths, border colors, and outline treatment for components, states, and custom surfaces.
- [Typography](https://www.beeq.design/foundations/typography.md): BEEQ typography defines text hierarchy, reading rhythm, and the implementation classes developers use to apply type consistently.
- [AI tools](https://www.beeq.design/getting-started/ai-tools.md): Use BEEQ documentation with AI assistants, MCP clients, llms.txt, and skill.md resources.
- [Design principles](https://www.beeq.design/getting-started/design-principles.md): The values and methodology that guide every decision in BEEQ — from individual component behaviour to the overall system architecture.
- [For designers](https://www.beeq.design/getting-started/for-designers.md): Get the Figma library, understand design foundations, and start creating consistent product experiences with BEEQ.
- [For developers](https://www.beeq.design/getting-started/for-developers.md): BEEQ can be integrated through framework-specific wrappers or used directly as web components. Choose the setup path that matches your stack and rendering model.
- [Installation](https://www.beeq.design/getting-started/installation.md): Shared setup for every BEEQ integration — install the core package and load global styles before you open your framework guide.
- [Introduction](https://www.beeq.design/getting-started/introduction.md): Start here to get familiar with BEEQ, choose the path that matches your role, and find the right resources to begin.
- [Angular](https://www.beeq.design/guides/frameworks/angular.md): Integrate BEEQ in Angular with the official wrapper, standalone component imports, and support for reactive forms, template-driven forms, and signals.
- [HTML / Web Components](https://www.beeq.design/guides/frameworks/html-web-components.md): Use BEEQ directly through @beeq/core in plain HTML, JavaScript, or TypeScript — with a CDN or a bundler, without a framework wrapper.
- [Next.js](https://www.beeq.design/guides/frameworks/next.md): Use BEEQ in Next.js with the React SSR wrapper so you can keep server rendering while still configuring client-side assets and interactivity.
- [React](https://www.beeq.design/guides/frameworks/react.md): Use BEEQ in React through the React wrapper for better prop binding, custom event support, and a smoother developer experience.
- [Vue.js](https://www.beeq.design/guides/frameworks/vue.md): Use BEEQ in Vue through the Vue wrapper for cleaner component imports, event bindings, and `v-model` support.
- [Styling components](https://www.beeq.design/guides/styles.md): Apply CSS overrides to BEEQ components using shadow DOM parts, global design tokens, and component-level CSS variables.
- [Changelog](https://www.beeq.design/releases/changelog.md): New features, bug fixes, and improvements to the BEEQ Design System.
- [Component CSS Variables](https://www.beeq.design/theming/component-css-variables.md): Each BEEQ component exposes CSS custom properties that give you fine-grained control over styling without touching global variables.
- [Custom Theme](https://www.beeq.design/theming/custom-theme.md): This guide walks you through creating and applying a custom theme across your app or project.
- [Global CSS Variables](https://www.beeq.design/theming/global-css-variables.md): Find out about every global CSS variable that BEEQ offers and their uses.
- [Themes & Modes](https://www.beeq.design/theming/themes-and-modes.md): The BEEQ design system supports two themes — **beeq** and **endava** — and two modes — **dark** and **light**. You can apply these styles using HTML attributes or CSS classes.

## OpenAPI Specs

- [openapi](https://www.beeq.design/api-reference/openapi.json)