Add a new prop or feature to an existing nc-ui component. Use this skill when the user wants to extend a component with new behavior, a new prop, a callback, or a visual option.
When extending an nc-ui component, changes must be made consistently across four places: the component source, the CSS theme, the dev demo section, and the AI reference docs.
src/styles/theme.cssdev/UIComponentsDemo/sections/nc-ui-ai-reference/components-quick-reference.mdOpen src/components/<ComponentName>.tsx.
export interface TabsProps {
// ...existing props...
/** Brief JSDoc description of what the new prop does. */
newProp?: string;
}
Guidelines:
?src/index.ts)export function Tabs({ ..., newProp }: TabsProps) {
// implement behavior
}
Open src/styles/theme.css and add styles near the existing styles for that component (search for its nc- prefix class).
Rules:
nc- prefix: .nc-tab-close, .nc-button-icon, etc.var(--nc-text), var(--nc-primary), var(--nc-border), etc..nc-tab-close {
opacity: 0.5;
transition:
opacity 120ms,
background 120ms;
}
.nc-tab-close:hover {
opacity: 1;
background: var(--nc-bg-tertiary);
}
Open the corresponding section file in dev/UIComponentsDemo/sections/, e.g. TabsSection.tsx.
useState)<section className="dev-section"> block to showcase the feature<p>) explaining the prop and how to use itExample structure:
<section className='dev-section'>
<h2>Closable Tabs</h2>
<p style={{ marginBottom: 16, color: 'var(--nc-text-weak)' }}>
Provide <code>onClose</code> to show a close button on each tab. Use{' '}
<code>permanentTabs</code> to exclude specific tabs from being closable.
</p>
{/* demo JSX */}
</section>
Open nc-ui-ai-reference/components-quick-reference.md and find the section for the component.
Before:
**Props:** `tabs`, `active`, `onChange`, `orientation`, `toolbar`
After:
**Props:** `tabs`, `active`, `onChange`, `onClose`, `permanentTabs`, `orientation`, `toolbar`
onClose + permanentTabs Feature on TabsThis feature was added following the checklist above:
Component (Tabs.tsx):
onClose?: (tab: string) => void — triggers when a tab's × is clickedpermanentTabs?: string[] — tabs in this list never show a close buttonconst isClosable = onClose && !permanentTabs?.includes(t)<span className="nc-tab-close"> SVG × icon inside closable tabsCSS (theme.css):
.nc-tab-item.nc-closable — flex layout with reduced right padding.nc-tab-close — always visible at 0.5 opacity, brightens on hoverDemo (TabsSection.tsx):
closableTabs, closableActiveDocs (components-quick-reference.md):
onClose and permanentTabs to the Tabs example and props listget_errors after editing TypeScript filespadding-right: 8px rather than changing the base .nc-tab-itemposition: relative; top: Npx for fine pixel-level vertical adjustments to inline iconse.stopPropagation() is essential on close button click handlers to prevent triggering the parent tab's onClick