{"id":30232365,"url":"https://github.com/davec6662/borealui","last_synced_at":"2026-04-10T16:32:11.793Z","repository":{"id":306922361,"uuid":"1026955997","full_name":"DaveC6662/borealui","owner":"DaveC6662","description":"A highly customizable, accessible React and Next.js component library with SCSS-powered theming. ","archived":false,"fork":false,"pushed_at":"2025-08-11T17:33:24.000Z","size":3861,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-11T19:33:25.463Z","etag":null,"topics":["component","library","nextjs","react-components","scss","typescript-react","uikit"],"latest_commit_sha":null,"homepage":"https://www.borealui.ca","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DaveC6662.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-27T01:54:53.000Z","updated_at":"2025-08-11T17:33:28.000Z","dependencies_parsed_at":"2025-07-28T13:39:51.419Z","dependency_job_id":null,"html_url":"https://github.com/DaveC6662/borealui","commit_stats":null,"previous_names":["davec6662/borealui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DaveC6662/borealui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveC6662%2Fborealui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveC6662%2Fborealui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveC6662%2Fborealui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveC6662%2Fborealui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DaveC6662","download_url":"https://codeload.github.com/DaveC6662/borealui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveC6662%2Fborealui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270500676,"owners_count":24595163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","library","nextjs","react-components","scss","typescript-react","uikit"],"created_at":"2025-08-14T23:57:15.097Z","updated_at":"2026-04-10T16:32:11.782Z","avatar_url":"https://github.com/DaveC6662.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Boreal UI\n\nA **highly customizable**, **accessible** React and Next.js component library with SCSS-powered theming.  \nOffers both Core (framework-agnostic React) and Next.js-optimized variants for seamless integration in any project.\n\n---\n\n## Features\n\n- **Dual Build Support:**  \n  Use `boreal-ui/core` for any React project or `boreal-ui/next` for Next.js apps.\n- **SCSS-Based Theming:**  \n  Override color, typography, spacing, border, and shadow variables to perfectly match your brand.\n- **Accessibility First:**  \n  WCAG-friendly out of the box. Includes keyboard navigation, ARIA roles, and robust focus states.\n- **Rich Component Set:**  \n  Buttons, IconButtons, Cards, Accordions, Modals, Tabs, DataTable, Avatar, Badge, Tooltip, FileUpload, EmptyState, and more.\n- **TypeScript Native:**  \n  All components include full prop typing and interfaces for an exceptional developer experience.\n\n---\n\n## Installation\n\n```bash\nnpm install boreal-ui\n```\n\n---\n\n## Quick Usage\n\n### Including Global Styles\n\n**For Next.js :**\n\nIn your globals.css (or globals.scss), add the following at the top:\n\n```css\n@import \"boreal-ui/next/globals.css\";\n```\n\nThen, make sure this global file is included in your layout or \\_app.tsx:\n\n```tsx\nimport \"./globals.css\"; // or \"./globals.scss\"\n```\n\n**For React (Core):**\n\nIf you're using boreal-ui/core, import the base styles in your main entry (e.g., index.tsx or App.tsx):\n\n```tsx\nimport \"boreal-ui/core/globals.css\";\n```\n\n### Importing Components\n\n**For React (Core):**\n\n```tsx\nimport { Button } from \"boreal-ui/core/Button\";\nimport { Card } from \"boreal-ui/core/Card\";\n```\n\n**For Next.js (Optimized):**\n\n```tsx\nimport { Button } from \"boreal-ui/next/Button\";\nimport { Card } from \"boreal-ui/next/Card\";\n```\n\n---\n\n## Global Configuration\n\nBoreal UI lets you define project-wide style defaults (theme, rounding, shadow, size) in a single config API.\n\n**Call the config API**\n\n```ts\nimport { setBorealStyleConfig } from \"boreal-ui/config/[next|core]\";\n\nsetBorealStyleConfig({\n  defaultTheme: \"secondary\", // \"primary\" | \"secondary\" | \"tertiary\" | \"quaternary\"\n  defaultRounding: \"medium\", // \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n  defaultShadow: \"light\", // \"none\" | \"light\" | \"medium\" | \"strong\" | \"intense\"\n  defaultSize: \"large\", // \"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\"\n});\n```\n\nCall this once early in your app before rendering any components.\n\nThese defaults apply globally, but you can override them per component as needed:\n\n```tsx\n\u003cButton theme=\"secondary\" size=\"large\" shadow=\"strong\"\u003e\n  Custom Button\n\u003c/Button\u003e\n```\n\n## Theming \u0026 Custom Color Schemes\n\nBoreal UI supports custom color schemes through the `ThemeProvider`.\n\n**Wrap your app (typically in `_app.tsx` or a custom provider):**\n\n```tsx\n\"use client\";\nimport { ThemeProvider } from \"boreal-ui\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        \u003cThemeProvider\n          customSchemes={[\n            {\n              name: \"Cyberpunk Pulse\",\n              primaryColor: \"#ff006e\",\n              secondaryColor: \"#8338ec\",\n              tertiaryColor: \"#3a0ca3\",\n              quaternaryColor: \"#fb5607\",\n              backgroundColor: \"#0f0f0f\",\n            },\n          ]}\n        \u003e\n          {children}\n        \u003c/ThemeProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n**Theme property reference:**\n\n| Property          | Description                      |\n| ----------------- | -------------------------------- |\n| `name`            | Unique identifier for the scheme |\n| `primaryColor`    | Main UI color                    |\n| `secondaryColor`  | Accent color                     |\n| `tertiaryColor`   | Additional accent                |\n| `quaternaryColor` | Additional accent                |\n| `backgroundColor` | Background/base color            |\n\n---\n\n## Post-Install Verification\n\nAfter installation, we recommend testing the following in your app:\n\n- Component renders correctly and styles are applied.\n\n- Custom theme is working when passed via ThemeProvider.\n\n- Global config overrides (theme, size, etc.) are applied.\n\n- No console errors or missing styles on first render.\n\n## Why Use Boreal UI?\n\n- Enforces consistent styling and branding across your project.\n- Save time: define defaults once, override only when needed.\n- Switch between multiple color schemes easily (great for light/dark mode).\n- Fully accessible and ready for production.\n\n---\n\n## Contributing\n\n1. Fork this repo.\n2. Create a feature branch: `git checkout -b feat/my-component`\n3. Commit your changes: `git commit -m \"Add MyComponent\"`\n4. Push to your fork: `git push origin feat/my-component`\n5. Open a Pull Request.\n\n**Include**\n\n- Component logic (TSX)\n- Styles (SCSS)\n- Tests (Jest/Cypress)\n- Storybook stories\n- Docs/comments for props\n\n---\n\n## License\n\nMIT © [Davin Chiupka](https://davinchiupka.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavec6662%2Fborealui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavec6662%2Fborealui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavec6662%2Fborealui/lists"}