App UI — make:component
- Creates
src/components/ui/task-card.* - Registers in
appRegistry - Extends
CoreComponentwith Shadow DOM lifecycle
Component library
Learn how to build components, then explore every built-in nc-* that ships with create-nativecore.
Getting started with components
NativeCoreJS UI is Web Components on the platform — no virtual DOM. Built-ins live under src/components/core/; your app components live under src/components/ui/. You are not limited to nc-*: install any npm package (utilities or other Web Component libraries) and import it — the scaffold syncs an import map on dev / compile.
- Scaffold an app:
npx create-nativecore@latest my-app - Open a view and drop in a tag, e.g.
<nc-button variant="primary">Save</nc-button> - Tags register lazily via
frameworkRegistry/appRegistry— no manual import in most cases
Deep dive: Native Web Components · First component · Core components · Slots
How to build your own
Use generators so registration and naming stay consistent.
App UI —
Framework-style — make:core-component
- Creates
src/components/core/nc-status-pill.* - Registers in
frameworkRegistry - Use for shared
nc-*primitives you want to treat as built-ins
Pull newer framework nc-* into an existing app with
npm run sync:components
(runtime Core is separate: npm run sync:core).
Built-in library
Every registered built-in tag with a live sample. Child tags (e.g. nc-tab-item) appear inside their parents.
63 built-in tags documented below.
Actions
nc-button
Primary action button with variants.
nc-copy-button
Copy a value to the clipboard.
nc-chip
Compact label / filter chip.
nc-a
Framework-aware anchor for SPA navigation.
nc-scroll-top
Floating control to scroll back to top.
Present on long pages — try scrolling this site.
Inputs
nc-input
Text input with label and validation hooks.
nc-textarea
Multi-line text area.
nc-select
Select from a list of options.
nc-number-input
Numeric stepper input.
nc-checkbox
Boolean checkbox.
nc-switch
Toggle switch.
nc-radio
Radio option within a group.
nc-slider
Range slider.
nc-otp-input
One-time passcode digit fields.
nc-tag-input
Free-form tag entry.
nc-autocomplete
Text input with suggestion list.
nc-color-picker
Color value picker.
nc-date-picker
Date selection control.
nc-time-picker
Time selection control.
nc-file-upload
File upload drop zone / picker.
nc-rating
Star rating control.
nc-rich-text
Lightweight rich text surface.
nc-form
Form wrapper coordinating nc-field inputs.
nc-fieldchild
Labeled field wrapper used inside nc-form.
Shown inside nc-form above.
Feedback
nc-alert
Inline status message.
nc-snackbar
Transient toast notification.
nc-progress
Linear progress bar.
nc-progress-circular
Circular progress indicator.
nc-badge
Count / status badge.
nc-skeleton
Loading placeholder shimmer.
nc-empty-state
Empty collection placeholder.
loading-spinner
Inline page loading spinner (shell default).
Overlays
nc-modal
Modal dialog with slots.
Wire open/close from your controller.
nc-drawer
Side drawer panel.
Use for filters, details, or mobile nav.
nc-popover
Anchored popover content.
Short contextual content.
nc-tooltip
Hover / focus tooltip.
nc-dropdown
Dropdown menu trigger.
nc-menu
Menu list container.
See nc-dropdown demo above.
nc-menu-itemchild
Single menu row.
Used inside nc-menu.
Data & content
nc-table
Simple data table.
nc-timeline
Vertical event timeline.
nc-timeline-itemchild
Timeline row.
Used inside nc-timeline.
nc-accordion
Expandable sections.
nc-accordion-itemchild
Accordion panel.
Used inside nc-accordion.
nc-collapsible
Simple show/hide region.
Collapsed content for progressive disclosure.
nc-code
Syntax-highlighted code block.
nc-kbd
Keyboard key glyph.
Identity & media
nc-avatar
User avatar.
nc-avatar-group
Stacked avatar group.
nc-image
Responsive image with loading helpers.
Layout & primitives
nc-card
Content card surface.
Card
Group related content with optional header/footer slots.
nc-div
Styled layout div primitive.
nc-divider
Horizontal or vertical rule.
Above
Below
nc-animation
Declarative animation helper.