Component library

Learn how to build components, then explore every built-in nc-* that ships with create-nativecore.

Getting started Built-in catalog

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 — `make:component`

npm run make:component task-card

Creates src/components/ui/task-card.*
Registers in appRegistry
Extends CoreComponent with Shadow DOM lifecycle

Framework-style — `make:core-component`

npm run make:core-component status-pill

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.

Primary

Outline

Secondary

Tertiary

`nc-copy-button`

Copy a value to the clipboard.

`nc-chip`

Compact label / filter chip.

Web Components

Signals

`nc-a`

Framework-aware anchor for SPA navigation.

Go to Get started

`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.

Submit

`nc-field`child

Labeled field wrapper used inside nc-form.

Shown inside nc-form above.

Feedback

`nc-alert`

Inline status message.

Platform events and Shadow DOM.

Scaffold ready — JS by default.

Prefer attributes from source.

Check the console for unknown elements.

`nc-snackbar`

Transient toast notification.

Show snackbar

`nc-progress`

Linear progress bar.

`nc-progress-circular`

Circular progress indicator.

`nc-badge`

Count / status badge.

inbox

done

`nc-skeleton`

Loading placeholder shimmer.

`nc-empty-state`

Empty collection placeholder.

`loading-spinner`

Inline page loading spinner (shell default).

Overlays

`nc-drawer`

Side drawer panel.

Open drawer

Drawer

Use for filters, details, or mobile nav.

Close

`nc-tabs`

Tabbed content panels.

Router, state, and components.

Ebook + cheat sheet on this site.

npm run build:full

`nc-tab-item`child

Single tab panel.

Used inside nc-tabs.

`nc-pagination`

Page number controls.

`nc-bottom-nav`

Mobile bottom navigation bar.

`nc-bottom-nav-item`child

Bottom nav item.

Used inside nc-bottom-nav.

`nc-nav-item`

Sidebar / nav link item.

`nc-stepper`

Multi-step progress flow.

`nc-step`child

Single stepper step.

Used inside nc-stepper.

Data & content

`nc-table`

Simple data table.

`nc-timeline`

Vertical event timeline.

`nc-timeline-item`child

Timeline row.

Used inside nc-timeline.

`nc-accordion`

Expandable sections.

Router, state, generators, and nc-* UI.

npm run sync:components

`nc-accordion-item`child

Accordion panel.

Used inside nc-accordion.

`nc-collapsible`

Simple show/hide region.

Collapsed content for progressive disclosure.

`nc-code`

Syntax-highlighted code block.

npx create-nativecore@latest my-app

`nc-kbd`

Keyboard key glyph.

Ctrl + K

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-div surface

`nc-divider`

Horizontal or vertical rule.

Above

Below

`nc-animation`

Path-picking motion: CSS compositor, GPU WAAPI, or canvas particles — chosen from the preset name.

Animated entrance wrapper.