Component examples

Choose colours by purpose. These swatches use the live shared theme and change with light and dark mode.

Existing aliases such as --color-bg and --glass-border remain available for compatibility. Use semantic names in new code.

Suisse Intl gives headings their shape and keeps reading and controls clear; Geist Mono is reserved for code.

Interactive examples of the existing UI compatibility API. Native Astryx props are available through @n3wth/ui/primitives.

Interactive examples of the existing UI compatibility API. Native Astryx props are available through @n3wth/ui/primitives.

<Tabs value={tab} onChange={setTab} variant="underline">
  <TabsList>
    <TabsTab value="tab1">Overview</TabsTab>
    <TabsTab value="tab2">Features</TabsTab>
  </TabsList>
  <TabsPanel value="tab1">Overview content</TabsPanel>
  <TabsPanel value="tab2">Features content</TabsPanel>
</Tabs>

<Modal isOpen={open} onClose={() => setOpen(false)} size="md">
  <ModalHeader>
    <div>
      <ModalTitle>Modal Title</ModalTitle>
      <ModalDescription>Description text</ModalDescription>
    </div>
    <ModalCloseButton onClick={() => setOpen(false)} />
  </ModalHeader>
  <ModalBody>Content here</ModalBody>
  <ModalFooter>
    <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={() => setOpen(false)}>Confirm</Button>
  </ModalFooter>
</Modal>

// Standalone
<Toast
  variant="success"
  title="Toast Title"
  description="Toast description"
  duration={5000}
  onDismiss={() => setShow(false)}
/>
​
// With useToast hook + Provider
const { toast } = useToast()
toast.success({ title: 'Done!', description: 'Action completed' })

<CommandBox command="npm install @n3wth/ui" />

const { theme, toggleTheme } = useTheme()
<ThemeToggle theme={theme} onToggle={toggleTheme} size="md" />

Page structure belongs to the shared UI layer. The live shell uses these components.

import { AssembleField, VisualBand } from '@n3wth/ui/visuals'
import '@n3wth/ui/site.css'
​
<VisualBand height="clamp(190px, 34svh, 340px)">
  <AssembleField clusters={[[530, 132], [645, 284], [762, 158]]}
    width={900} height={400} />
</VisualBand>

React hooks for theme, media queries, accessibility, and animations.

import { useTheme } from '@n3wth/ui'
​
function ThemeSwitch() {
  const { theme, setTheme, toggleTheme } = useTheme()
​
  return (
    <button onClick={toggleTheme}>
      {theme === 'dark' ? 'Switch to Light' : 'Switch to Dark'}
    </button>
  )
}

import { useIsMobile, useBreakpoint, useMediaQuery } from '@n3wth/ui'
​
function ResponsiveLayout() {
  const isMobile = useIsMobile()      // < 768px
  const isTablet = useIsTablet()      // 768-1023px
  const isDesktop = useIsDesktop()    // >= 1024px
  const breakpoint = useBreakpoint()  // 'sm' | 'md' | 'lg' | 'xl' | '2xl'
  const isWide = useMediaQuery('(min-width: 1440px)')
​
  return (
    <div className={isMobile ? 'stack' : 'grid-cols-3'}>
      {isWide && <Sidebar />}
      <Main />
    </div>
  )
}

import { useReducedMotion } from '@n3wth/ui'
​
function AnimatedCard() {
  const prefersReducedMotion = useReducedMotion()
​
  return (
    <div
      className={prefersReducedMotion ? 'opacity-100' : 'animate-fade-in'}
      style={{ transition: prefersReducedMotion ? 'none' : 'all 0.3s ease' }}
    >
      Accessible animation
    </div>
  )
}

import { useCountUp } from '@n3wth/ui'
​
function StatsCounter() {
  const { value, ref } = useCountUp(1000, {
    duration: 2,
    onScroll: false,
  })
​
  return <span ref={ref}>{value}</span>
}

import { useKeyboardShortcuts, getModifierKey } from '@n3wth/ui'
​
function SearchDialog() {
  const [open, setOpen] = useState(false)
  const modKey = getModifierKey() // 'Cmd' | 'Ctrl'
​
  useKeyboardShortcuts([
    {
      key: 'k',
      modifiers: ['meta'],
      handler: () => setOpen(true),
      description: 'Open search',
    },
  ])
​
  return <span>Press {modKey}+K to search</span>
}