Overview
Every component @nyte-ai/ui exports, and the import path for each
@nyte-ai/ui is one component set. The package root exports the components we style with StyleX
and --nyte-* tokens. The subpaths re-export a Base UI namespace unstyled, so Base UI owns the
interaction model and you own every class, StyleX style, and layout decision.
import "@nyte-ai/ui/styles.css";
import { Button } from "@nyte-ai/ui";
import { Popover } from "@nyte-ai/ui/popover";Import paths
| Component | Styled | Unstyled |
|---|---|---|
| Alert dialog | @nyte-ai/ui | @nyte-ai/ui/alert-dialog |
| Autocomplete | none | @nyte-ai/ui/autocomplete |
| Avatar | @nyte-ai/ui | none |
| Button | @nyte-ai/ui | @nyte-ai/ui/button |
| Collapsible | none | @nyte-ai/ui/collapsible |
| Context menu | none | @nyte-ai/ui/context-menu |
| Dialog | @nyte-ai/ui | @nyte-ai/ui/dialog |
| Input | @nyte-ai/ui | none |
| Menu | @nyte-ai/ui | @nyte-ai/ui/menu |
| Number field | none | @nyte-ai/ui/number-field |
| Popover | none | @nyte-ai/ui/popover |
| Preview card | none | @nyte-ai/ui/preview-card |
| Row | @nyte-ai/ui, @nyte-ai/ui/row | none |
| Select | none | @nyte-ai/ui/select |
| Slider | none | @nyte-ai/ui/slider |
| Switch | none | @nyte-ai/ui/switch |
| Tabs | none | @nyte-ai/ui/tabs |
| Textarea | @nyte-ai/ui | none |
| Toast | @nyte-ai/ui/sonner | none |
| Toggle | none | @nyte-ai/ui/toggle |
| Toggle group | none | @nyte-ai/ui/toggle-group |
| Toolbar | none | @nyte-ai/ui/toolbar |
| Tooltip | none | @nyte-ai/ui/tooltip |
The styled menu exports are named DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
and so on. @nyte-ai/ui/row and the package root export the same Row. @nyte-ai/ui/sonner
re-exports Toaster, toast, and useSonner from the sonner package, which brings its own
styling.
Import a Base UI namespace from its subpath rather than from @base-ui/react, so the Base UI
version stays behind the shared package. When render produces something other than a <button>,
pass nativeButton={false} so Base UI keeps button semantics.