@ayoungh/cmpnnts
v0.1.7
Published
Reusable React UI components and utilities for your design system.
Readme
@ayoungh/cmpnnts
Reusable React UI components and utilities for your design system.
Install
pnpm add @ayoungh/cmpnntsConsumer setup (Next.js App Router)
- Import styles once in your root layout:
import "@ayoungh/cmpnnts/styles.css"- Wrap your app with the design system provider:
import { DesignSystemProvider } from "@ayoungh/cmpnnts"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<DesignSystemProvider>{children}</DesignSystemProvider>
</body>
</html>
)
}- Use components anywhere:
import { Button, Card, CardContent, CardHeader, CardTitle } from "@ayoungh/cmpnnts"
export function ExampleCard() {
return (
<Card>
<CardHeader>
<CardTitle>Design System</CardTitle>
</CardHeader>
<CardContent>
<Button>Click me</Button>
</CardContent>
</Card>
)
}Theme provider options
DesignSystemProvider includes:
ThemeProvider(vianext-themes)TooltipProvider- Sonner toaster (
SonnerToaster)
You can disable pieces when needed:
<DesignSystemProvider withToaster={false} withTooltipProvider={false}>
{children}
</DesignSystemProvider>You can also use ThemeProvider directly if you only want theming:
import { ThemeProvider } from "@ayoungh/cmpnnts"
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>Geist components (including Tree)
Geist components are re-exported so you can import them from this package.
import { Tree, GeistProvider, CssBaseline } from "@ayoungh/cmpnnts"Example:
<GeistProvider>
<CssBaseline />
<Tree>
<Tree.File name="package.json" />
<Tree.Folder name="components">
<Tree.File name="button.tsx" />
</Tree.Folder>
</Tree>
</GeistProvider>Tailwind setup (required)
Components use utilities like bg-background, text-foreground, and border-border.
Your app's Tailwind theme must define those tokens.
For Tailwind v4, add token mapping in your global CSS (after @import "tailwindcss"):
@theme inline {
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
}For Tailwind v3, add the equivalent theme.extend.colors mapping in tailwind.config.
Theming and tokens
Base tokens are shipped in @ayoungh/cmpnnts/styles.css (:root and .dark CSS variables).
To brand your system from another repo, override CSS variables in your app after importing package CSS.
- In your app layout, import in this order:
import "@ayoungh/cmpnnts/styles.css"
import "./brand-tokens.css"- Create
brand-tokens.cssand override tokens:
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 220 90% 56%;
--primary-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 220 90% 56%;
--radius: 0.75rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
}Keep the Tailwind token mapping section above so classes like
bg-backgroundandborder-borderresolve correctly.Optional multi-brand mode: scope tokens by attribute/class:
[data-brand="acme"] {
--primary: 220 90% 56%;
}
[data-brand="sunset"] {
--primary: 12 90% 55%;
}Then set the brand at runtime, for example on <html data-brand="acme">.
Exports
Primary entrypoint:
@ayoungh/cmpnntsfor components/utilities/providers
Styles entrypoint:
@ayoungh/cmpnnts/styles.css
Components
AccordionAccordionItemAccordionTriggerAccordionContentAlertAlertTitleAlertDescriptionAlertDialogAlertDialogPortalAlertDialogOverlayAlertDialogTriggerAlertDialogContentAlertDialogHeaderAlertDialogFooterAlertDialogTitleAlertDialogDescriptionAlertDialogActionAlertDialogCancelAspectRatioAvatarAvatarImageAvatarFallbackBadgeBreadcrumbBreadcrumbListBreadcrumbItemBreadcrumbLinkBreadcrumbPageBreadcrumbSeparatorBreadcrumbEllipsisButtonCalendarCardCardHeaderCardFooterCardTitleCardDescriptionCardContentCarouselCarouselContentCarouselItemCarouselPreviousCarouselNextCheckboxCollapsibleCollapsibleTriggerCollapsibleContentCommandCommandDialogCommandInputCommandListCommandEmptyCommandGroupCommandItemCommandShortcutCommandSeparatorContextMenuContextMenuTriggerContextMenuContentContextMenuItemContextMenuCheckboxItemContextMenuRadioItemContextMenuLabelContextMenuSeparatorContextMenuShortcutContextMenuGroupContextMenuPortalContextMenuSubContextMenuSubContentContextMenuSubTriggerContextMenuRadioGroupDialogDialogPortalDialogOverlayDialogCloseDialogTriggerDialogContentDialogHeaderDialogFooterDialogTitleDialogDescriptionDrawerDrawerPortalDrawerOverlayDrawerTriggerDrawerCloseDrawerContentDrawerHeaderDrawerFooterDrawerTitleDrawerDescriptionDropdownMenuDropdownMenuTriggerDropdownMenuContentDropdownMenuItemDropdownMenuCheckboxItemDropdownMenuRadioItemDropdownMenuLabelDropdownMenuSeparatorDropdownMenuShortcutDropdownMenuGroupDropdownMenuPortalDropdownMenuSubDropdownMenuSubContentDropdownMenuSubTriggerDropdownMenuRadioGroupFormFormItemFormLabelFormControlFormDescriptionFormMessageFormFieldHoverCardHoverCardTriggerHoverCardContentInputInputOTPInputOTPGroupInputOTPSlotInputOTPSeparatorLabelMenubarMenubarMenuMenubarTriggerMenubarContentMenubarItemMenubarSeparatorMenubarLabelMenubarCheckboxItemMenubarRadioGroupMenubarRadioItemMenubarPortalMenubarSubContentMenubarSubTriggerMenubarGroupMenubarSubMenubarShortcutNavigationMenuNavigationMenuListNavigationMenuItemNavigationMenuContentNavigationMenuTriggerNavigationMenuLinkNavigationMenuIndicatorNavigationMenuViewportPaginationPaginationContentPaginationEllipsisPaginationItemPaginationLinkPaginationNextPaginationPreviousPopoverPopoverTriggerPopoverContentProgressRadioGroupRadioGroupItemResizablePanelGroupResizablePanelResizableHandleScrollAreaScrollBarSelectSelectGroupSelectValueSelectTriggerSelectContentSelectLabelSelectItemSelectSeparatorSelectScrollUpButtonSelectScrollDownButtonSeparatorSheetSheetPortalSheetOverlaySheetTriggerSheetCloseSheetContentSheetHeaderSheetFooterSheetTitleSheetDescriptionSkeletonSliderSwitchTableTableHeaderTableBodyTableFooterTableHeadTableRowTableCellTableCaptionTabsTabsListTabsTriggerTabsContentTextareaToastProviderToastViewportToastToastTitleToastDescriptionToastCloseToastActionToasterToastToasterSonnerToasterTreeGeistProviderCssBaselineToggleToggleGroupToggleGroupItemTooltipTooltipTriggerTooltipContentTooltipProvider
Local development (this repo)
pnpm install
pnpm devPreview app runs at http://localhost:3000.
Build the npm package
pnpm build:packageThis creates a publishable package in dist/ with:
- compiled JS
- type declarations
styles.css(for design tokens/base styles)
Publish to npm
- Login:
pnpm login- Verify the package content:
pnpm pack:check- Publish:
pnpm publish --access publicNotes
- Current package name is
@ayoungh/cmpnnts(change inpackage.jsonif you want a different npm scope/name). - The repository still includes the Next.js app for previewing components while developing the design system.