{"id":50750811,"url":"https://github.com/markbang/base-themes","last_synced_at":"2026-06-11T01:02:49.865Z","repository":{"id":360919563,"uuid":"1252239232","full_name":"markbang/base-themes","owner":"markbang","description":"Base-UI themes","archived":false,"fork":false,"pushed_at":"2026-05-28T11:25:23.000Z","size":1560,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-28T13:15:45.494Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markbang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-28T10:22:20.000Z","updated_at":"2026-05-28T11:24:59.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/markbang/base-themes","commit_stats":null,"previous_names":["markbang/base-themes"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/markbang/base-themes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbang%2Fbase-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbang%2Fbase-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbang%2Fbase-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbang%2Fbase-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markbang","download_url":"https://codeload.github.com/markbang/base-themes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbang%2Fbase-themes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34177445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"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":[],"created_at":"2026-06-11T01:02:48.706Z","updated_at":"2026-06-11T01:02:49.806Z","avatar_url":"https://github.com/markbang.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# base-themes\n\n[![CI](https://github.com/markbang/base-themes/actions/workflows/ci.yml/badge.svg)](https://github.com/markbang/base-themes/actions/workflows/ci.yml)\n[![npm provenance](https://img.shields.io/badge/npm-provenance-0a7)](https://docs.npmjs.com/generating-provenance-statements)\n[![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n\nThemeable React components built on [Base UI](https://base-ui.com/). Base Themes packages accessible primitives, practical product themes, source-copy registry metadata, and production-ready examples behind one CSS-token contract.\n\nDocs: \u003chttps://base-themes.bangwu.me/\u003e\n\n## Highlights\n\n- **Base UI behavior:** focus management, keyboard interaction, portals, and overlay primitives come from `@base-ui/react`.\n- **20 visual styles:** Bento, shadcn, Neo Brutalism, Enterprise, Linear, Glass, Terminal, Material, Fluent, Cyberpunk, Mono, and more.\n- **CSS-token theming:** switch style and color mode with `data-style` and `data-theme`; customize stable `--bt-*` tokens without a JavaScript theme runtime.\n- **Registry-first distribution:** components, blocks, theme files, dependencies, metadata, and source-copy plans are available from package exports and shadcn-style registry JSON.\n- **Useful blocks included:** dashboard shell, auth card, pricing panel, data table, command palette, team activity feed, settings form, and theme showcase card.\n- **Agent/tool friendly:** package metadata, CLI commands, docs routes, and the included `base-themes` skill make it easy for automation to inspect, install, copy, and verify.\n\n## Quick Start\n\n```bash\nnpm install base-themes @base-ui/react react react-dom\n```\n\n```tsx\nimport 'base-themes/styles.css'\nimport { Button, Select } from 'base-themes'\n\nexport function App() {\n  return (\n    \u003cmain data-style=\"bento\" data-theme=\"light\"\u003e\n      \u003cButton\u003eShip it\u003c/Button\u003e\n      \u003cSelect\n        id=\"density\"\n        label=\"Density\"\n        defaultValue=\"comfortable\"\n        items={{ compact: 'Compact', comfortable: 'Comfortable', spacious: 'Spacious' }}\n      /\u003e\n    \u003c/main\u003e\n  )\n}\n```\n\nPortaled components such as `Select`, `Combobox`, `Dialog`, `Popover`, and `Tooltip` render outside deeply nested wrappers. Put `data-style` and `data-theme` on `html`, `body`, your app shell, or the portal container so overlays inherit the same theme.\n\nStrict TypeScript projects may also need:\n\n```ts\ndeclare module 'base-themes/styles.css'\n```\n\n## Themes\n\n```html\n\u003chtml data-style=\"shadcn\" data-theme=\"dark\"\u003e\n```\n\nAvailable styles:\n\n`bento`, `shadcn`, `neo-brutalism`, `minimal`, `enterprise`, `linear`, `glass`, `terminal`, `material`, `fluent`, `retro`, `cyberpunk`, `editorial`, `calm`, `data-dense`, `playful`, `luxury`, `soft-ui`, `bauhaus`, `mono`.\n\nTheme previews are generated from the same docs app and live under [public/previews](./public/previews).\n\n## Components\n\nBase Themes wraps the common Base UI surface with shared styles and typed React exports:\n\n`Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Combobox`, `ContextMenu`, `CspProvider`, `Dialog`, `DirectionProvider`, `Drawer`, `Field`, `Fieldset`, `Form`, `Input`, `Menu`, `Menubar`, `Meter`, `NavigationMenu`, `NumberField`, `OtpField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `RadioGroup`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Switch`, `Tabs`, `ToastProvider`, `Toggle`, `ToggleGroup`, `Toolbar`, and `Tooltip`.\n\n## Blocks\n\n```tsx\nimport { DashboardShell, SettingsForm } from 'base-themes'\n```\n\nBlocks are source-copyable and exported from the package:\n\n- Dashboard Shell\n- Settings Form\n- Auth Card\n- Pricing Panel\n- Data Table\n- Command Palette\n- Team Activity Feed\n- Theme Showcase Card\n\nSee `/blocks` in the docs app for previews and detail routes.\n\n## Registry And CLI\n\nThe package exposes registry artifacts for copy-based workflows:\n\n```ts\nimport registry from 'base-themes/registry.json'\nimport shadcnRegistry from 'base-themes/shadcn-registry.json'\nimport buttonItem from 'base-themes/registry/items/button.json'\nimport themeMeta from 'base-themes/theme-meta.json'\nimport tokenContract from 'base-themes/token-contract.json'\n```\n\nCLI commands:\n\n```bash\nnpx base-themes list\nnpx base-themes plan button select block:dashboard-shell theme:enterprise\nnpx base-themes add button select block:dashboard-shell theme:enterprise --target . --dry-run\nnpx base-themes doctor .\n```\n\n`plan` explains source files, dependencies, theme attributes, and registry item metadata. `add` copies files conservatively and leaves existing files untouched unless `--force` is used. `doctor` checks package dependencies, CSS import, and theme wiring.\n\n## Examples\n\n- [examples/vite](./examples/vite): Vite React app using package imports.\n- [examples/next](./examples/next): Next.js App Router / React 19 example.\n- [examples/dashboard](./examples/dashboard): product dashboard composed from shipped blocks.\n- [examples/theme-customization](./examples/theme-customization): token override and brand customization example.\n- [examples/registry-copy](./examples/registry-copy): source-copy registry workflow.\n\n## Development\n\n```bash\nnpm install\nnpm run dev\n```\n\nUseful local routes:\n\n```text\nhttp://localhost:5175/components/button\nhttp://localhost:5175/blocks\nhttp://localhost:5175/themes\nhttp://localhost:5175/docs/installation\nhttp://localhost:5175/docs/registry\n```\n\nCore checks:\n\n```bash\nnpm run registry:check\nnpm run tokens:check\nnpm run lint\nnpm run test\nnpm run build\nnpm run package:smoke\n```\n\nRelease-level visual checks:\n\n```bash\nnpm run themes:e2e\nnpm run previews:check\n```\n\n## Publishing\n\nReleases are published from GitHub Actions with npm provenance and trusted publishing. See [RELEASE.md](./RELEASE.md) for the release checklist.\n\n## Security\n\nSecurity reports follow [SECURITY.md](./SECURITY.md). Runtime dependencies are intentionally small: `clsx` and `lucide-react`, with React and Base UI as peer dependencies.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkbang%2Fbase-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkbang%2Fbase-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkbang%2Fbase-themes/lists"}