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
@n3wth/ui (root)

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()} />
}

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

import { Button } from '@n3wth/ui'

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

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

Component catalog

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)

Theme Provider

Mount N3wthProvider and load the Newth theme CSS.

Layouts

Build page frames with the site composition components.

Get Started

Theming

Components

Recipes

Reference

Primitives and Adapters

Choose your import

Component catalog

Atoms

Molecules

Organisms

Theme Provider

Layouts

​Choose your import

​Component catalog

​Atoms

​Molecules

​Organisms

​Related

Theme Provider

Layouts

Choose your import

Component catalog

Atoms

Molecules

Organisms

Related