{"_id":"@abbainitiative/ui","name":"@abbainitiative/ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@abbainitiative/ui","version":"0.1.0","description":"ABBA Design System — accessible, themeable React components for React and Next.js App Router applications.","keywords":["react","nextjs","component-library","design-system","accessible","ui","abba"],"license":"MIT","author":{"name":"ABBA Initiative"},"homepage":"https://abba-ui.vercel.app","repository":{"type":"git","url":"git+https://github.com/Lonergun141/abba-ui.git","directory":"packages/ui"},"bugs":{"url":"https://github.com/Lonergun141/abba-ui/issues"},"type":"module","sideEffects":["**/*.css"],"types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css","./box":{"types":"./dist/components/box/index.d.ts","import":"./dist/components/box/index.js"},"./stack":{"types":"./dist/components/stack/index.d.ts","import":"./dist/components/stack/index.js"},"./inline":{"types":"./dist/components/inline/index.d.ts","import":"./dist/components/inline/index.js"},"./container":{"types":"./dist/components/container/index.d.ts","import":"./dist/components/container/index.js"},"./grid":{"types":"./dist/components/grid/index.d.ts","import":"./dist/components/grid/index.js"},"./separator":{"types":"./dist/components/separator/index.d.ts","import":"./dist/components/separator/index.js"},"./visually-hidden":{"types":"./dist/components/visually-hidden/index.d.ts","import":"./dist/components/visually-hidden/index.js"},"./text":{"types":"./dist/components/text/index.d.ts","import":"./dist/components/text/index.js"},"./heading":{"types":"./dist/components/heading/index.d.ts","import":"./dist/components/heading/index.js"},"./label":{"types":"./dist/components/label/index.d.ts","import":"./dist/components/label/index.js"},"./code":{"types":"./dist/components/code/index.d.ts","import":"./dist/components/code/index.js"},"./link":{"types":"./dist/components/link/index.d.ts","import":"./dist/components/link/index.js"},"./button":{"types":"./dist/components/button/index.d.ts","import":"./dist/components/button/index.js"},"./icon-button":{"types":"./dist/components/icon-button/index.d.ts","import":"./dist/components/icon-button/index.js"},"./button-group":{"types":"./dist/components/button-group/index.d.ts","import":"./dist/components/button-group/index.js"},"./input":{"types":"./dist/components/input/index.d.ts","import":"./dist/components/input/index.js"},"./textarea":{"types":"./dist/components/textarea/index.d.ts","import":"./dist/components/textarea/index.js"},"./form-field":{"types":"./dist/components/form-field/index.d.ts","import":"./dist/components/form-field/index.js"},"./form-message":{"types":"./dist/components/form-message/index.d.ts","import":"./dist/components/form-message/index.js"},"./card":{"types":"./dist/components/card/index.d.ts","import":"./dist/components/card/index.js"},"./badge":{"types":"./dist/components/badge/index.d.ts","import":"./dist/components/badge/index.js"},"./alert":{"types":"./dist/components/alert/index.d.ts","import":"./dist/components/alert/index.js"},"./spinner":{"types":"./dist/components/spinner/index.d.ts","import":"./dist/components/spinner/index.js"},"./dialog":{"types":"./dist/components/dialog/index.d.ts","import":"./dist/components/dialog/index.js"},"./dropdown-menu":{"types":"./dist/components/dropdown-menu/index.d.ts","import":"./dist/components/dropdown-menu/index.js"},"./tabs":{"types":"./dist/components/tabs/index.d.ts","import":"./dist/components/tabs/index.js"},"./toast":{"types":"./dist/components/toast/index.d.ts","import":"./dist/components/toast/index.js"},"./package.json":"./package.json"},"scripts":{"build":"vite build && pnpm run build:types","build:types":"tsc -p tsconfig.build.json","dev":"vite build --watch","lint":"eslint .","typecheck":"tsc -p tsconfig.json --noEmit","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","clean":"rimraf dist .turbo *.tgz"},"dependencies":{"@radix-ui/react-dialog":"1.1.23","@radix-ui/react-dropdown-menu":"2.1.24","@radix-ui/react-slot":"1.3.3","@radix-ui/react-tabs":"1.1.21","@radix-ui/react-toast":"1.2.23"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"devDependencies":{"@abbainitiative/eslint-config":"workspace:*","@abbainitiative/typescript-config":"workspace:*","@testing-library/jest-dom":"7.0.0","@testing-library/react":"16.3.2","@testing-library/user-event":"14.6.3","@types/node":"^26.1.2","@types/react":"19.2.18","@types/react-dom":"19.2.4","@vitejs/plugin-react":"6.0.5","@vitest/coverage-v8":"4.1.10","axe-core":"4.12.1","eslint":"10.8.0","jsdom":"30.0.1","magic-string":"1.1.0","react":"19.2.8","react-dom":"19.2.8","rimraf":"6.0.1","typescript":"6.0.3","vite":"8.2.0","vitest":"4.1.10"},"publishConfig":{"access":"public"},"gitHead":"95bde3c9314b60ffbee9fc760f124df06f35ec1a","_id":"@abbainitiative/ui@0.1.0","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-8YSaoQ79FTBO+WZJ9TZ/kpYeWVX/TGRbBDlljV8MDE4MVrCxueNE+CVecYxRZIe8F9/EMSVOYIxRV3guoH1b+w==","shasum":"2127a179d7de1aaf7d4a8f53b8098bda4e9edc69","tarball":"https://registry.npmjs.org/@abbainitiative/ui/-/ui-0.1.0.tgz","fileCount":202,"unpackedSize":292968,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEQhl152rNmHLK1ur7idJSjjWySB10wSBvaWInR1ZNKBAiBDEti+nJfQ+yE5+AT9Fma83aA9fzBVAAKCatPy/7Qblg=="}]},"_npmUser":{"name":"jaeger141","email":"gevero530@gmail.com"},"directories":{},"maintainers":[{"name":"jaeger141","email":"gevero530@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.0_1785897425055_0.25411974732722653"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-05T02:37:04.806Z","0.1.0":"2026-08-05T02:37:05.201Z","modified":"2026-08-05T02:37:05.480Z"},"maintainers":[{"name":"jaeger141","email":"gevero530@gmail.com"}],"description":"ABBA Design System — accessible, themeable React components for React and Next.js App Router applications.","homepage":"https://abba-ui.vercel.app","keywords":["react","nextjs","component-library","design-system","accessible","ui","abba"],"repository":{"type":"git","url":"git+https://github.com/Lonergun141/abba-ui.git","directory":"packages/ui"},"author":{"name":"ABBA Initiative"},"bugs":{"url":"https://github.com/Lonergun141/abba-ui/issues"},"license":"MIT","readme":"# @abbainitiative/ui\n\nReact components for Next.js and plain React. No Tailwind, no provider, no config.\n\n**[Live docs →](https://abba-ui.vercel.app)** · [GitHub](https://github.com/Lonergun141/abba-ui)\n\n---\n\n## Install\n\n```bash\npnpm add @abbainitiative/ui\n```\n\nReact 18.2 or 19 is a peer dependency.\n\n## Use it\n\n**1. Import the stylesheet once**, at the root of your app:\n\n```tsx\n// app/layout.tsx (Next.js) or src/main.tsx (Vite)\nimport \"@abbainitiative/ui/styles.css\";\n```\n\nPut it above your own stylesheets so your overrides win.\n\n**2. Use the components:**\n\n```tsx\nimport { Button, Card, CardBody, Heading, Stack } from \"@abbainitiative/ui\";\n\nexport default function Page() {\n  return (\n    <Card variant=\"elevated\">\n      <CardBody>\n        <Stack gap={4}>\n          <Heading level={1}>Welcome back</Heading>\n          <Button>Get started</Button>\n        </Stack>\n      </CardBody>\n    </Card>\n  );\n}\n```\n\nNo `transpilePackages`, no PostCSS plugin, no theme provider.\n\n## What's in it\n\n|                |                                                                        |\n| -------------- | ---------------------------------------------------------------------- |\n| **Layout**     | `Box` `Stack` `Inline` `Container` `Grid` `Separator` `VisuallyHidden` |\n| **Typography** | `Text` `Heading` `Label` `Code` `Link`                                 |\n| **Buttons**    | `Button` `IconButton` `ButtonGroup`                                    |\n| **Forms**      | `Input` `Textarea` `FormField` `FormMessage`                           |\n| **Display**    | `Card` `Badge`                                                         |\n| **Feedback**   | `Alert` `Spinner`                                                      |\n| **Overlays**   | `Dialog` `DropdownMenu` `Tabs` `Toast`                                 |\n\nEvery component also has its own entry point: `@abbainitiative/ui/badge`.\n\n## Quick examples\n\n```tsx\n<Button variant=\"danger\" loading>Deleting</Button>\n<Button asChild><Link href=\"/signup\">Sign up</Link></Button>\n<IconButton aria-label=\"Delete\" icon={<TrashIcon />} />\n\n<FormField label=\"Email\" error={error} required>\n  <Input type=\"email\" />\n</FormField>\n\n<Alert tone=\"danger\" title=\"Payment failed\">Update your card details.</Alert>\n<Badge tone=\"success\" dot>Active</Badge>\n```\n\n[Every component, with live examples →](https://abba-ui.vercel.app/docs/components)\n\n## Dark mode\n\nSet `data-theme=\"dark\"` or the class `dark` on `<html>`. Both selectors ship, so `next-themes` works unchanged.\n\n## Theming\n\nEvery colour, size and radius is a CSS variable. Override what you want, after the ABBA stylesheet:\n\n```css\n:root {\n  --abba-primary: #4338ca;\n  --abba-radius-md: 3px;\n  --abba-font-sans: var(--my-font), system-ui, sans-serif;\n}\n```\n\nNo provider and no runtime, so it works inside Server Components too. [Token list →](https://abba-ui.vercel.app/docs/tokens)\n\n## Next.js\n\n`\"use client\"` is placed per component, never at the package root — so importing a `Stack` does not drag the whole library into your client bundle.\n\n**Server-renderable:** `Box` `Stack` `Inline` `Container` `Grid` `Separator` `VisuallyHidden` `Text` `Heading` `Label` `Code` `Link` `ButtonGroup` `FormMessage` `Card` `Badge` `Spinner`\n\n**Bring their own client boundary:** `Button` `IconButton` `Input` `Textarea` `FormField` `Alert` `Dialog` `DropdownMenu` `Tabs` `Toast`\n\nYou can render either kind from a Server Component — you just cannot pass a function to one. [Next.js guide →](https://abba-ui.vercel.app/docs/nextjs)\n\n## Accessibility\n\nKeyboard interaction, focus management and ARIA relationships ship with each component and are tested, including an automated axe pass in CI. Focus trapping and menu navigation come from [Radix](https://www.radix-ui.com/primitives), used internally — none of its API is exposed.\n\n## Requirements\n\n- React 18.2 or 19\n- `\"moduleResolution\": \"bundler\"`, `node16` or `nodenext` in your `tsconfig.json`\n- Evergreen Chrome, Edge, Firefox, Safari\n\nMIT © ABBA Initiative\n","readmeFilename":"README.md","_rev":"1-f2b0d2532bea31643996cf87db242ddd"}