@manakind/ui-core

The shared base components of the Manakind design system. These are the product-agnostic primitives — logic, structure, accessibility, and token-driven styling — that every product package (@manakind/manuia-ui, @manakind/shiptight-ui, and later Momentus) builds on.

Components ship logic + structural CSS only. All visual values come from the --ds-* CSS-variable contract, which a product's token package (e.g. @manakind/manuia-tokens) supplies via its theme.css. Loading no theme means the components render unstyled; loading a product theme is what gives them that product's look.

Install

npm install @manakind/ui-core react react-dom

react and react-dom (^19) are peer dependencies.

Usage

// 1. Load a product theme so the --ds-* contract resolves.
import '@manakind/manuia-tokens/css/primitives';
import '@manakind/manuia-tokens/css/semantic';
import '@manakind/manuia-tokens/css/components';
import '@manakind/manuia-tokens/css/theme';

// Dark theme. Emitted under `:root.dark, :root[data-theme='dark']`, so these
// are inert until you set the class or attribute — import them even if dark
// ships later, or switching it on silently does nothing. All three are needed:
// `manuia-ui` reads --semantic-* and --component-* directly, not only --ds-*.
import '@manakind/manuia-tokens/css/semantic-dark';
import '@manakind/manuia-tokens/css/components-dark';
import '@manakind/manuia-tokens/css/theme-dark';

// 2. Load component CSS and import the component.
import '@manakind/ui-core/css/button';
import { Button } from '@manakind/ui-core';

export function Save() {
  return <Button variant="solid">Save</Button>;
}

Most consumers use the product surface (@manakind/manuia-ui) instead of importing ui-core directly.

Exports

Every component is available from the root and its own subpath when you want to import just one. The ./css/* subpaths carry each component's structural CSS separately, so an app can load only what it renders.

| Entry | Contents | |---|---| | @manakind/ui-core | Everything below, plus every prop type, the cx helper, and the built-in fallback glyphs (FallbackChevronLeft, FallbackChevronRight, FallbackCheck, FallbackCross, FallbackPin) for compositions that want the same defaults | | @manakind/ui-core/alert | Alert | | @manakind/ui-core/avatar | Avatar + initialsOf | | @manakind/ui-core/badge | Badge | | @manakind/ui-core/breadcrumb | Breadcrumb | | @manakind/ui-core/button | Button + IconButton | | @manakind/ui-core/calendar | Calendar | | @manakind/ui-core/card | Card, CardHeader, CardTitle, CardLink, CardDescription, CardContent, CardFooter | | @manakind/ui-core/dialog | Dialog + DialogClose | | @manakind/ui-core/icon | Icon | | @manakind/ui-core/illustration | Illustration + illustrationPaint | | @manakind/ui-core/menu | Menu, MenuTrigger, ActionMenu; MenuItem.icon adds a decorative glyph before its label | | @manakind/ui-core/popover | Popover | | @manakind/ui-core/checkbox | Checkbox | | @manakind/ui-core/combobox | Combobox; ComboboxItem.group collects options under named headings, with keyboard navigation in displayed order; toolbar, status and facets put filters, a status line and a pinnable facet column inside the open list | | @manakind/ui-core/date-input | DateInput | | @manakind/ui-core/progress | Progress | | @manakind/ui-core/reorder-control | ReorderControl | | @manakind/ui-core/segment-group | SegmentGroup; fit="content" sizes segments to their labels, density="dense" reduces inline padding | | @manakind/ui-core/select | Select | | @manakind/ui-core/switch | Switch | | @manakind/ui-core/field | Field, Input, Textarea, useFieldControl | | @manakind/ui-core/tabs | Tabs, TabsList, TabsTrigger, TabsContent | | @manakind/ui-core/layout | Stack, Inline, Grid, Container, Frame, Spacer and the layout step types | | @manakind/ui-core/text | Text + Heading | | @manakind/ui-core/link | Link | | @manakind/ui-core/divider | Divider | | @manakind/ui-core/show | Show | | @manakind/ui-core/visually-hidden | VisuallyHidden | | @manakind/ui-core/skeleton | Skeleton | | @manakind/ui-core/spinner | Spinner | | @manakind/ui-core/scroll-area | ScrollArea | | @manakind/ui-core/sticky | Sticky | | @manakind/ui-core/empty-state | EmptyState | | @manakind/ui-core/page-layout | PageLayout, PageHeader, PageTitle, PageDescription, PageActions | | @manakind/ui-core/section | Section | | @manakind/ui-core/split-layout | SplitLayout, SplitMain, SplitAside | | @manakind/ui-core/form-layout | FormLayout, FormActions | | @manakind/ui-core/wizard-layout | WizardLayout, WizardHeader, WizardContent, WizardFooter | | @manakind/ui-core/centered-layout | CenteredLayout | | @manakind/ui-core/css/alert | Alert structural CSS; its icon also needs css/icon | | @manakind/ui-core/css/avatar | Avatar structural CSS; its fallback glyph also needs css/icon | | @manakind/ui-core/css/badge | Badge structural CSS | | @manakind/ui-core/css/breadcrumb | Breadcrumb structural CSS; a custom separator also needs css/icon | | @manakind/ui-core/css/button | Button + IconButton structural CSS | | @manakind/ui-core/css/calendar | Calendar structural CSS; its paging buttons also need css/button and css/icon | | @manakind/ui-core/css/card | Card structural CSS | | @manakind/ui-core/css/dialog | Dialog structural CSS; its close button also needs css/button and css/icon | | @manakind/ui-core/css/icon | Icon structural CSS | | @manakind/ui-core/css/illustration | Illustration structural CSS, including the paint roles | | @manakind/ui-core/css/menu | Menu and ActionMenu structural CSS; an ActionMenu's glyphs also need css/icon | | @manakind/ui-core/css/popover | Popover structural CSS | | @manakind/ui-core/css/checkbox | Checkbox structural CSS | | @manakind/ui-core/css/combobox | Combobox structural CSS | | @manakind/ui-core/css/date-input | DateInput structural CSS | | @manakind/ui-core/css/progress | Progress structural CSS | | @manakind/ui-core/css/reorder-control | ReorderControl structural CSS; its handle and input also need css/button, css/icon and css/field | | @manakind/ui-core/css/segment-group | SegmentGroup structural CSS | | @manakind/ui-core/css/select | Select structural CSS | | @manakind/ui-core/css/switch | Switch structural CSS | | @manakind/ui-core/css/field | Field, Input and Textarea structural CSS | | @manakind/ui-core/css/tabs | Tabs structural CSS | | @manakind/ui-core/css/layout | Stack, Inline, Grid, Container, Frame and Spacer structural CSS | | @manakind/ui-core/css/text | Text and Heading structural CSS | | @manakind/ui-core/css/link | Link structural CSS | | @manakind/ui-core/css/divider | Divider structural CSS | | @manakind/ui-core/css/show | Show structural CSS | | @manakind/ui-core/css/visually-hidden | VisuallyHidden structural CSS | | @manakind/ui-core/css/skeleton | Skeleton structural CSS | | @manakind/ui-core/css/spinner | Spinner structural CSS; its label also needs css/visually-hidden | | @manakind/ui-core/css/scroll-area | ScrollArea structural CSS | | @manakind/ui-core/css/sticky | Sticky structural CSS | | @manakind/ui-core/css/empty-state | EmptyState structural CSS; its glyph also needs css/icon | | @manakind/ui-core/css/page-layout | PageLayout structural CSS; its title and description also need css/text | | @manakind/ui-core/css/section | Section structural CSS; its title and description also need css/text | | @manakind/ui-core/css/split-layout | SplitLayout structural CSS | | @manakind/ui-core/css/form-layout | FormLayout structural CSS | | @manakind/ui-core/css/wizard-layout | WizardLayout structural CSS; its header also needs css/progress and css/text | | @manakind/ui-core/css/centered-layout | CenteredLayout structural CSS |

Structural CSS is only half of what a component needs — it consumes --ds-* custom properties that a product's theme supplies. See Installation.

License

MIT — see LICENSE.