Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/web-components.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Noora web components
Install the public package from the npm package registry:
```sh
npm install @tuist/noora
```
Import the design tokens and the component registration bundle once in the browser entry point:
```javascript
import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";
```
Use attributes for primitive values and declarative child elements for structured content:
```html
<noora-dropdown label="Options">
<noora-dropdown-item value="edit" icon="edit">Edit</noora-dropdown-item>
<noora-dropdown-item value="delete" icon="trash">Delete</noora-dropdown-item>
</noora-dropdown>
```
Collection properties remain available when items are created programmatically. Declarative children take precedence when both forms are present.
Respond to standard browser events and Noora custom events with `addEventListener`. Custom events bubble, cross shadow-root boundaries, and expose structured values through `event.detail`:
```javascript
const select = document.querySelector("noora-select");
select.addEventListener("change", () => {
console.log(select.value);
});
select.addEventListener("noora-select", (event) => {
console.log(event.detail.value);
});
```
The registration bundle defines every published Noora custom element. The package also includes `custom-elements.json` for tools that support the Custom Elements Manifest format and TypeScript declarations for the public element properties.
Component contracts are consumed during the build. Applications do not fetch the contract files at runtime.
## Components
- [Alert](./components/alert.md): Communicates contextual information with a semantic status.
- [Avatar](./components/avatar.md): Displays an image, initials, or a placeholder for an account.
- [Badge](./components/badge.md): Labels an item with compact status or categorization information.
- [Banner](./components/banner.md): Displays a page-level message with an optional dismiss action.
- [Breadcrumbs](./components/breadcrumbs.md): Shows the current location in a navigational hierarchy.
- [ButtonDropdown](./components/buttondropdown.md): Combines a primary button action with an attached menu.
- [ButtonGroup](./components/buttongroup.md): Groups related controls into a compact segmented surface.
- [Button](./components/button.md): Triggers an action, submits a form, or navigates to another location.
- [Card](./components/card.md): Groups related content into a titled surface.
- [Chart](./components/chart.md): Renders an Apache ECharts visualization from declarative configuration elements.
- [Checkbox](./components/checkbox.md): Lets a user select one or more independent options.
- [DatePicker](./components/datepicker.md): Selects a date range with a two-month calendar, optional presets, and editable range fields.
- [DigitInput](./components/digitinput.md): Collects a fixed-length verification or personal identification code.
- [DismissIcon](./components/dismissicon.md): Provides a compact, accessible dismiss button.
- [Dropdown](./components/dropdown.md): Opens a menu of actions or navigational items.
- [Filter](./components/filter.md): Builds and displays a set of structured filters.
- [HintText](./components/hinttext.md): Provides supporting or validation text for a form field.
- [Icon](./components/icon.md): Renders an icon from Noora's shared icon catalog.
- [InlineDropdown](./components/inlinedropdown.md): Opens a compact inline menu.
- [Label](./components/label.md): Labels a form control with optional supporting text.
- [LineDivider](./components/linedivider.md): Separates adjacent content with an optional inline label.
- [LinkButton](./components/linkbutton.md): Presents a text-oriented button or link.
- [Modal](./components/modal.md): Presents focused content above the current page.
- [NeutralButton](./components/neutralbutton.md): Provides a low-emphasis compact control.
- [PaginationGroup](./components/paginationgroup.md): Navigates a finite collection of numbered pages.
- [Popover](./components/popover.md): Displays contextual content anchored to a trigger.
- [ProgressBar](./components/progressbar.md): Visualizes progress toward a maximum value.
- [Select](./components/select.md): Selects one value from a list of options.
- [ShortcutKey](./components/shortcutkey.md): Displays a keyboard shortcut.
- [Sidebar](./components/sidebar.md): Provides responsive side navigation.
- [StatusBadge](./components/statusbadge.md): Displays a compact workflow status with a semantic icon or dot.
- [TabMenu](./components/tabmenu.md): Switches between related views or navigation destinations.
- [Table](./components/table.md): Displays structured rows and columns with optional sorting and expansion.
- [Tag](./components/tag.md): Displays a compact label with optional icon and dismissal.
- [TextArea](./components/textarea.md): Collects multi-line text with labels, hints, errors, and character counting.
- [TextDivider](./components/textdivider.md): Renders a compact textual section divider.
- [TextInput](./components/textinput.md): Collects single-line text with Noora labels, hints, prefixes, and suffixes.
- [Time](./components/time.md): Formats an absolute or relative date and time.
- [Toggle](./components/toggle.md): Turns a setting on or off.
- [Tooltip](./components/tooltip.md): Explains an element on pointer hover or keyboard focus.
## Supporting elements
- [BreadcrumbItem](./components/breadcrumbitem.md): Describes one declarative item inside breadcrumbs.
- [ButtonGroupItem](./components/buttongroupitem.md): Describes one declarative control inside a button group.
- [ChartAxis](./components/chartaxis.md): Describes one declarative chart axis.
- [ChartCategory](./components/chartcategory.md): Describes one declarative category on a chart axis.
- [ChartGrid](./components/chartgrid.md): Describes declarative chart-grid dimensions.
- [ChartPoint](./components/chartpoint.md): Describes one declarative chart data point.
- [ChartSeries](./components/chartseries.md): Describes one declarative chart data series.
- [DatePickerPreset](./components/datepickerpreset.md): Describes one declarative date-range preset.
- [DropdownItem](./components/dropdownitem.md): Describes one declarative item inside a dropdown or breadcrumb menu.
- [FilterDefinition](./components/filterdefinition.md): Describes one filter that a user can add.
- [FilterOption](./components/filteroption.md): Describes one allowed value for a filter definition.
- [FilterValue](./components/filtervalue.md): Describes one initially active filter.
- [SidebarGroup](./components/sidebargroup.md): Groups declarative sidebar destinations.
- [SidebarItem](./components/sidebaritem.md): Describes one declarative sidebar destination.
- [TabItem](./components/tabitem.md): Describes one declarative tab item.
- [TableCell](./components/tablecell.md): Describes one declarative table cell.
- [TableColumn](./components/tablecolumn.md): Describes one declarative table column.
- [TableRow](./components/tablerow.md): Describes one declarative table row.