Primitives and Adapters

@n3wth/ui/primitives re-exports the pinned Astryx core. The @n3wth/ui root exports adapter components with the Newth theme layered on top and a legacy prop shape. Applications must consume Astryx through @n3wth/ui/primitives, never directly.

Choose your import

@n3wth/ui/primitives

Use native Astryx APIs with the label prop.

import { Button } from '@n3wth/ui/primitives'

export function RefreshButton() {
  return <Button label="Reload page" onClick={() => window.location.reload()} />
}

@n3wth/ui (root)

Use compatibility adapters with children and historical props like variant="glass", leftIcon, and responsive size objects.

import { Button, Icon } from '@n3wth/ui'

export function GlassButton() {
  return (
    <Button variant="glass" size="md" leftIcon={<Icon name="arrow-right" />}>
      Continue
    </Button>
  )
}

Caution

These are different APIs even though both exports are named Button. Do not move imports between entry points without checking their types.

Component catalog

Compatibility boundaries

Root adapters preserve existing callers, but do not reproduce every historical visual option:

• Switch refs target a native input; Modal refs target its inner content div.
• Input and Textarea retain native controls for labels, input types, uncontrolled values, and form reset.
• Avatar retains native image attributes and callbacks. Button asChild retains the supplied element.
• Tooltip arrows, dropdown portals, and menuClassName do not customize Astryx presentation. Use native primitives for new work.
• Toast variants use the information surface except for errors. Legacy Hero gradient and entry-animation options are not applied.

Atoms

• Button
• Badge
• Input
• Icon
• NoiseOverlay
• ScrollIndicator
• HamburgerIcon
• AnimatedText
• CodeBlock
• Skeleton and CardSkeleton
• Shape
• Character
• SpeechBubble
• Tooltip
• Switch
• Avatar
• Separator
• Progress
• Label
• Textarea

Molecules

• Card (with CardHeader, CardTitle, CardDescription, CardContent, CardFooter)
• NavLink
• CommandBox
• ThemeToggle
• MobileDrawer
• ErrorBoundary (with ErrorFallback)
• CompositeShape (with presets)
• Modal (with ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter, ModalCloseButton)
• Tabs (with TabsList, TabsTab, TabsPanel)
• Toast (with ToastContainer)
• Dropdown (with DropdownTrigger, DropdownMenu, DropdownItem)
• Accordion (with AccordionItem, AccordionTrigger, AccordionContent)

Organisms

• Nav
• Footer
• Hero
• Section (with SectionHeader)

Related

Theme ProviderMount N3wthProvider and load the Newth theme CSS.

LayoutsBuild page frames with the site composition components.