base-themes 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/CODE_OF_CONDUCT.md +22 -0
- package/CONTRIBUTING.md +98 -0
- package/LICENSE +21 -0
- package/README.md +316 -3
- package/RELEASE.md +80 -0
- package/SECURITY.md +49 -0
- package/bin/base-themes.mjs +143 -0
- package/dist/base-themes.css +1 -1
- package/dist/base-themes.js +857 -302
- package/dist/llms-full.txt +288 -0
- package/dist/llms.txt +79 -0
- package/dist/types/blocks/AuthCard.d.ts +2 -0
- package/dist/types/blocks/CommandPaletteBlock.d.ts +2 -0
- package/dist/types/blocks/DashboardShell.d.ts +2 -0
- package/dist/types/blocks/DataTableBlock.d.ts +2 -0
- package/dist/types/blocks/PricingPanel.d.ts +2 -0
- package/dist/types/blocks/SettingsForm.d.ts +2 -0
- package/dist/types/blocks/TeamActivityFeed.d.ts +2 -0
- package/dist/types/blocks/ThemeShowcaseCard.d.ts +2 -0
- package/dist/types/blocks/index.d.ts +8 -0
- package/dist/types/components/ui/Input.d.ts +3 -0
- package/dist/types/components/ui/index.d.ts +1 -1
- package/dist/types/lib.d.ts +1 -0
- package/docs/adoption-dashboard.md +149 -0
- package/docs/analytics-setup.md +145 -0
- package/docs/community-gallery-proposal.md +64 -0
- package/docs/community-proof-telemetry.md +47 -0
- package/docs/contributor-issue-seeds.md +240 -0
- package/docs/registry-access-telemetry.md +87 -0
- package/docs/release-announcement-kit.md +229 -0
- package/docs/search-console-setup.md +111 -0
- package/docs/theme-token-contract.md +113 -0
- package/examples/dashboard/README.md +24 -0
- package/examples/dashboard/index.html +12 -0
- package/examples/dashboard/package-lock.json +1212 -0
- package/examples/dashboard/package.json +24 -0
- package/examples/dashboard/src/App.tsx +115 -0
- package/examples/dashboard/src/main.tsx +11 -0
- package/examples/dashboard/src/styles.css +129 -0
- package/examples/dashboard/src/vite-env.d.ts +4 -0
- package/examples/dashboard/tsconfig.app.json +23 -0
- package/examples/dashboard/tsconfig.json +7 -0
- package/examples/dashboard/tsconfig.node.json +15 -0
- package/examples/dashboard/vite.config.ts +6 -0
- package/examples/next/README.md +29 -0
- package/examples/next/app/base-themes-demo.tsx +70 -0
- package/examples/next/app/layout.tsx +16 -0
- package/examples/next/app/page.tsx +9 -0
- package/examples/next/app/styles.css +106 -0
- package/examples/next/next-env.d.ts +6 -0
- package/examples/next/next.config.ts +5 -0
- package/examples/next/package-lock.json +1199 -0
- package/examples/next/package.json +27 -0
- package/examples/next/tsconfig.json +36 -0
- package/examples/registry-copy/README.md +73 -0
- package/examples/registry-copy/plan-copy.mjs +130 -0
- package/examples/theme-customization/README.md +26 -0
- package/examples/theme-customization/index.html +12 -0
- package/examples/theme-customization/package-lock.json +1212 -0
- package/examples/theme-customization/package.json +24 -0
- package/examples/theme-customization/src/App.tsx +138 -0
- package/examples/theme-customization/src/main.tsx +11 -0
- package/examples/theme-customization/src/styles.css +138 -0
- package/examples/theme-customization/src/vite-env.d.ts +4 -0
- package/examples/theme-customization/tsconfig.app.json +23 -0
- package/examples/theme-customization/tsconfig.json +7 -0
- package/examples/theme-customization/tsconfig.node.json +15 -0
- package/examples/theme-customization/vite.config.ts +6 -0
- package/examples/vite/README.md +32 -0
- package/examples/vite/index.html +12 -0
- package/examples/vite/package-lock.json +1200 -0
- package/examples/vite/package.json +24 -0
- package/examples/vite/src/App.tsx +101 -0
- package/examples/vite/src/main.tsx +11 -0
- package/examples/vite/src/styles.css +125 -0
- package/examples/vite/src/vite-env.d.ts +4 -0
- package/examples/vite/tsconfig.app.json +23 -0
- package/examples/vite/tsconfig.json +7 -0
- package/examples/vite/tsconfig.node.json +15 -0
- package/examples/vite/vite.config.ts +6 -0
- package/llms-full.txt +288 -0
- package/llms.txt +79 -0
- package/package.json +157 -14
- package/registry/items/accordion.json +101 -0
- package/registry/items/alert-dialog.json +107 -0
- package/registry/items/autocomplete.json +106 -0
- package/registry/items/avatar.json +101 -0
- package/registry/items/block-auth-card.json +105 -0
- package/registry/items/block-command-palette.json +99 -0
- package/registry/items/block-dashboard-shell.json +101 -0
- package/registry/items/block-data-table.json +99 -0
- package/registry/items/block-pricing-panel.json +99 -0
- package/registry/items/block-settings-form.json +107 -0
- package/registry/items/block-team-activity-feed.json +99 -0
- package/registry/items/block-theme-showcase-card.json +99 -0
- package/registry/items/button.json +102 -0
- package/registry/items/checkbox-group.json +106 -0
- package/registry/items/checkbox.json +102 -0
- package/registry/items/collapsible.json +101 -0
- package/registry/items/combobox.json +101 -0
- package/registry/items/context-menu.json +106 -0
- package/registry/items/csp-provider.json +96 -0
- package/registry/items/dialog.json +102 -0
- package/registry/items/direction-provider.json +101 -0
- package/registry/items/drawer.json +101 -0
- package/registry/items/field.json +101 -0
- package/registry/items/fieldset.json +101 -0
- package/registry/items/form.json +101 -0
- package/registry/items/input.json +102 -0
- package/registry/items/menu.json +101 -0
- package/registry/items/menubar.json +106 -0
- package/registry/items/meter.json +101 -0
- package/registry/items/navigation-menu.json +101 -0
- package/registry/items/number-field.json +101 -0
- package/registry/items/otp-field.json +101 -0
- package/registry/items/popover.json +102 -0
- package/registry/items/preview-card.json +101 -0
- package/registry/items/progress.json +101 -0
- package/registry/items/radio-group.json +102 -0
- package/registry/items/radio.json +101 -0
- package/registry/items/scroll-area.json +101 -0
- package/registry/items/select.json +102 -0
- package/registry/items/separator.json +101 -0
- package/registry/items/slider.json +102 -0
- package/registry/items/switch.json +102 -0
- package/registry/items/tabs.json +101 -0
- package/registry/items/theme-bauhaus.json +107 -0
- package/registry/items/theme-bento.json +107 -0
- package/registry/items/theme-calm.json +107 -0
- package/registry/items/theme-cyberpunk.json +108 -0
- package/registry/items/theme-data-dense.json +107 -0
- package/registry/items/theme-editorial.json +107 -0
- package/registry/items/theme-enterprise.json +108 -0
- package/registry/items/theme-fluent.json +107 -0
- package/registry/items/theme-glass.json +107 -0
- package/registry/items/theme-linear.json +107 -0
- package/registry/items/theme-luxury.json +107 -0
- package/registry/items/theme-material.json +107 -0
- package/registry/items/theme-minimal.json +107 -0
- package/registry/items/theme-mono.json +107 -0
- package/registry/items/theme-neo-brutalism.json +107 -0
- package/registry/items/theme-playful.json +107 -0
- package/registry/items/theme-retro.json +107 -0
- package/registry/items/theme-shadcn.json +107 -0
- package/registry/items/theme-soft-ui.json +107 -0
- package/registry/items/theme-terminal.json +107 -0
- package/registry/items/toast.json +106 -0
- package/registry/items/toggle-group.json +101 -0
- package/registry/items/toggle.json +101 -0
- package/registry/items/toolbar.json +101 -0
- package/registry/items/tooltip.json +102 -0
- package/registry/registry.json +564 -49
- package/registry/shadcn-registry.json +415 -0
- package/research/telemetry-fixtures/analytics-events.jsonl +9 -0
- package/research/telemetry-fixtures/bundle-report.json +44 -0
- package/research/telemetry-fixtures/community-proof.csv +5 -0
- package/research/telemetry-fixtures/registry-access.jsonl +10 -0
- package/research/telemetry-fixtures/search-console-export.csv +4 -0
- package/scripts/registry-plan.mjs +434 -0
- package/scripts/render-launch-actions.mjs +405 -0
- package/scripts/render-launch-status.mjs +373 -0
- package/scripts/render-release-announcement.mjs +329 -0
- package/scripts/verify-launch-readiness.mjs +415 -0
- package/scripts/verify-telemetry-fixtures.mjs +85 -0
- package/scripts/verify-telemetry-report.mjs +89 -0
- package/skills/base-themes/SKILL.md +151 -47
- package/src/blocks/AuthCard.tsx +29 -0
- package/src/blocks/Blocks.css +182 -0
- package/src/blocks/CommandPaletteBlock.tsx +32 -0
- package/src/blocks/DashboardShell.tsx +36 -0
- package/src/blocks/DataTableBlock.tsx +44 -0
- package/src/blocks/PricingPanel.tsx +28 -0
- package/src/blocks/SettingsForm.tsx +37 -0
- package/src/blocks/TeamActivityFeed.tsx +38 -0
- package/src/blocks/ThemeShowcaseCard.tsx +32 -0
- package/src/blocks/index.ts +8 -0
- package/src/components/ui/Accordion.css +42 -0
- package/src/components/ui/Accordion.tsx +41 -0
- package/src/components/ui/AlertDialog.css +40 -0
- package/src/components/ui/AlertDialog.tsx +52 -0
- package/src/components/ui/Autocomplete.css +3 -0
- package/src/components/ui/Autocomplete.tsx +50 -0
- package/src/components/ui/Avatar.css +45 -0
- package/src/components/ui/Avatar.tsx +36 -0
- package/src/components/ui/Button.css +79 -0
- package/src/components/ui/Button.tsx +20 -0
- package/src/components/ui/Checkbox.css +37 -0
- package/src/components/ui/Checkbox.tsx +32 -0
- package/src/components/ui/CheckboxGroup.tsx +21 -0
- package/src/components/ui/Collapsible.css +34 -0
- package/src/components/ui/Collapsible.tsx +29 -0
- package/src/components/ui/Combobox.css +75 -0
- package/src/components/ui/Combobox.tsx +53 -0
- package/src/components/ui/ContextMenu.css +9 -0
- package/src/components/ui/ContextMenu.tsx +47 -0
- package/src/components/ui/CspProvider.tsx +10 -0
- package/src/components/ui/Dialog.css +41 -0
- package/src/components/ui/Dialog.tsx +45 -0
- package/src/components/ui/DirectionProvider.tsx +17 -0
- package/src/components/ui/Drawer.css +77 -0
- package/src/components/ui/Drawer.tsx +56 -0
- package/src/components/ui/Field.css +19 -0
- package/src/components/ui/Field.tsx +24 -0
- package/src/components/ui/Fieldset.css +16 -0
- package/src/components/ui/Fieldset.tsx +19 -0
- package/src/components/ui/Form.css +5 -0
- package/src/components/ui/Form.tsx +12 -0
- package/src/components/ui/Input.css +50 -0
- package/src/components/ui/Input.tsx +62 -0
- package/src/components/ui/Menu.css +59 -0
- package/src/components/ui/Menu.tsx +50 -0
- package/src/components/ui/Menubar.css +26 -0
- package/src/components/ui/Menubar.tsx +42 -0
- package/src/components/ui/Meter.css +45 -0
- package/src/components/ui/Meter.tsx +37 -0
- package/src/components/ui/NavigationMenu.css +103 -0
- package/src/components/ui/NavigationMenu.tsx +64 -0
- package/src/components/ui/NumberField.css +38 -0
- package/src/components/ui/NumberField.tsx +28 -0
- package/src/components/ui/OtpField.css +28 -0
- package/src/components/ui/OtpField.tsx +24 -0
- package/src/components/ui/Popover.css +25 -0
- package/src/components/ui/Popover.tsx +37 -0
- package/src/components/ui/PreviewCard.css +33 -0
- package/src/components/ui/PreviewCard.tsx +43 -0
- package/src/components/ui/Progress.css +33 -0
- package/src/components/ui/Progress.tsx +28 -0
- package/src/components/ui/Radio.tsx +22 -0
- package/src/components/ui/RadioGroup.css +42 -0
- package/src/components/ui/RadioGroup.tsx +29 -0
- package/src/components/ui/ScrollArea.css +42 -0
- package/src/components/ui/ScrollArea.tsx +22 -0
- package/src/components/ui/Select.css +86 -0
- package/src/components/ui/Select.tsx +39 -0
- package/src/components/ui/Separator.css +14 -0
- package/src/components/ui/Separator.tsx +12 -0
- package/src/components/ui/Slider.css +39 -0
- package/src/components/ui/Slider.tsx +21 -0
- package/src/components/ui/Switch.css +45 -0
- package/src/components/ui/Switch.tsx +29 -0
- package/src/components/ui/Tabs.css +72 -0
- package/src/components/ui/Tabs.tsx +44 -0
- package/src/components/ui/Toast.css +75 -0
- package/src/components/ui/Toast.tsx +48 -0
- package/src/components/ui/Toggle.tsx +12 -0
- package/src/components/ui/ToggleGroup.css +35 -0
- package/src/components/ui/ToggleGroup.tsx +30 -0
- package/src/components/ui/Toolbar.css +60 -0
- package/src/components/ui/Toolbar.tsx +36 -0
- package/src/components/ui/Tooltip.css +14 -0
- package/src/components/ui/Tooltip.tsx +31 -0
- package/src/components/ui/index.ts +83 -0
- package/src/components/ui/useDirection.ts +1 -0
- package/src/components/ui/useToastManager.ts +11 -0
- package/src/docs/blockMeta.json +66 -0
- package/src/docs/componentMeta.json +322 -0
- package/src/docs/staticPageMeta.json +143 -0
- package/src/docs/themeMeta.json +22 -0
- package/src/styles/tokenContract.json +61 -0
- package/workers/analytics-receiver.mjs +170 -0
- package/wrangler.analytics.jsonc +12 -0
package/llms-full.txt
ADDED
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
# Base Themes Full Agent Context
|
|
2
|
+
|
|
3
|
+
Base Themes is a package-first React component system built on Base UI primitives. It provides typed component wrappers, CSS token themes, 20 visual styles, source-copy registry metadata, product blocks, runnable examples, and agent-oriented verification workflows.
|
|
4
|
+
|
|
5
|
+
## Primary Goals
|
|
6
|
+
|
|
7
|
+
- Prefer package installs for normal React apps.
|
|
8
|
+
- Use registry metadata before source-copying components, blocks, or themes.
|
|
9
|
+
- Keep changes token-based through `data-style`, `data-theme`, and stable `--bt-*` variables.
|
|
10
|
+
- Verify with registry, token, lint, test, build, SEO, bundle, and package smoke checks.
|
|
11
|
+
|
|
12
|
+
## Install And Verify
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install base-themes @base-ui/react react react-dom
|
|
16
|
+
npx base-themes list
|
|
17
|
+
npx base-themes list --json
|
|
18
|
+
npx base-themes plan button select block:dashboard-shell theme:enterprise
|
|
19
|
+
npx base-themes plan button select block:dashboard-shell theme:enterprise --json
|
|
20
|
+
npx base-themes add button select block:dashboard-shell theme:enterprise --target . --dry-run
|
|
21
|
+
npx base-themes add button select block:dashboard-shell theme:enterprise --target . --dry-run --json
|
|
22
|
+
npx base-themes doctor .
|
|
23
|
+
npx base-themes doctor . --json
|
|
24
|
+
npm run registry:check
|
|
25
|
+
npm run tokens:check
|
|
26
|
+
npm run lint
|
|
27
|
+
npm run test
|
|
28
|
+
npm run build
|
|
29
|
+
npm run seo:check
|
|
30
|
+
npm run bundle:report
|
|
31
|
+
npm run package:smoke
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Metadata Entrypoints
|
|
35
|
+
|
|
36
|
+
- [Registry JSON](https://base-themes.bangwu.me/registry/registry.json)
|
|
37
|
+
- [Shadcn-compatible registry catalog](https://base-themes.bangwu.me/registry/shadcn-registry.json)
|
|
38
|
+
- [Block metadata JSON](https://base-themes.bangwu.me/registry/block-meta.json)
|
|
39
|
+
- [Component metadata JSON](https://base-themes.bangwu.me/registry/component-meta.json)
|
|
40
|
+
- [Static page metadata JSON](https://base-themes.bangwu.me/registry/static-page-meta.json)
|
|
41
|
+
- [Theme metadata JSON](https://base-themes.bangwu.me/registry/theme-meta.json)
|
|
42
|
+
- [Compact agent discovery](https://base-themes.bangwu.me/llms.txt)
|
|
43
|
+
- [Sitemap](https://base-themes.bangwu.me/sitemap.xml)
|
|
44
|
+
|
|
45
|
+
## Standard Registry Agent Fields
|
|
46
|
+
|
|
47
|
+
- Component, block, and theme item JSON files include `meta.agent.summary`, `meta.agent.packageInstall`, `meta.agent.sourceCopy`, and `meta.agent.installPlan`.
|
|
48
|
+
- Block item JSON files also include `meta.agent.registryItems`, listing the block item URL and every component item URL needed for source-copy workflows.
|
|
49
|
+
- Prefer `meta.agent.packageInstall` for package consumers and `meta.agent.sourceCopy` for copy-based tools.
|
|
50
|
+
|
|
51
|
+
## Package Exports
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
import { Button, Select, DashboardShell, useTheme } from 'base-themes'
|
|
55
|
+
import registry from 'base-themes/registry.json'
|
|
56
|
+
import shadcnRegistry from 'base-themes/shadcn-registry.json'
|
|
57
|
+
import buttonItem from 'base-themes/registry/items/button.json'
|
|
58
|
+
import dashboardItem from 'base-themes/registry/items/block-dashboard-shell.json'
|
|
59
|
+
import blockMeta from 'base-themes/block-meta.json'
|
|
60
|
+
import componentMeta from 'base-themes/component-meta.json'
|
|
61
|
+
import staticPageMeta from 'base-themes/static-page-meta.json'
|
|
62
|
+
import themeMeta from 'base-themes/theme-meta.json'
|
|
63
|
+
import tokenContract from 'base-themes/token-contract.json'
|
|
64
|
+
import 'base-themes/styles.css'
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Docs Routes
|
|
68
|
+
|
|
69
|
+
- [Base Themes — Themeable Base UI React Components](https://base-themes.bangwu.me/): Typed Base UI React component wrappers with production CSS tokens, 20 visual themes, registry metadata, and ready-to-use product UI blocks.
|
|
70
|
+
- [Application Blocks — Base Themes](https://base-themes.bangwu.me/blocks): Composable dashboard and settings blocks built from accessible Base UI React primitives and themeable product UI tokens.
|
|
71
|
+
- [Theme System — Base Themes](https://base-themes.bangwu.me/themes): Explore Bento, shadcn, neo brutalism, minimal, enterprise, glass, terminal, and other token-based React UI themes.
|
|
72
|
+
- [Install Base Themes for React](https://base-themes.bangwu.me/docs/installation): Install base-themes from npm, import the bundled styles, and use typed Base UI React wrappers in Vite, Next.js, Remix, or any React app.
|
|
73
|
+
- [Theme Tokens and CSS Variables — Base Themes](https://base-themes.bangwu.me/docs/theming): Learn the Base Themes data-style and data-theme contract, CSS variable layers, dark mode behavior, and practical theme override workflow.
|
|
74
|
+
- [Registry and Source Copy Workflow — Base Themes](https://base-themes.bangwu.me/docs/registry): Use the Base Themes registry metadata to resolve components, blocks, source files, CSS tokens, dependencies, and copy plans for tools and agents.
|
|
75
|
+
- [Base Themes CLI for Registry Copy Workflows](https://base-themes.bangwu.me/docs/cli): Use npx base-themes list, plan, add, and doctor to inspect registry coverage, generate source-copy plans, copy files conservatively, and verify React app integration.
|
|
76
|
+
- [Agent Usage Guide — Base Themes](https://base-themes.bangwu.me/docs/agent-usage): Use the bundled Base Themes agent skill, registry exports, and verification commands to customize React components, blocks, and themes safely.
|
|
77
|
+
- [Runnable React Examples — Base Themes](https://base-themes.bangwu.me/docs/examples): Build Vite, dashboard, Next.js, and registry-copy examples that prove Base Themes package installs, CSS imports, blocks, and registry metadata work in real apps.
|
|
78
|
+
- [Contributing to Base Themes](https://base-themes.bangwu.me/docs/contributing): Follow the contribution workflow for Base Themes components, blocks, themes, registry metadata, tests, and release validation.
|
|
79
|
+
- [Customize React UI Theme Tokens — Base Themes](https://base-themes.bangwu.me/docs/theme-customization): Adjust Base Themes primary color, radius, font, and density tokens, preview the result, and copy ready-to-use CSS variables.
|
|
80
|
+
- [Why Base Themes for Base UI React Components](https://base-themes.bangwu.me/docs/why-base-themes): Learn how Base Themes adds typed wrappers, CSS variables, visual styles, registry metadata, and agent workflows on top of Base UI React primitives.
|
|
81
|
+
- [Base UI vs shadcn/ui for Themed React Apps](https://base-themes.bangwu.me/docs/base-ui-vs-shadcn): Compare Base UI, shadcn/ui, and Base Themes honestly across primitives, install model, theming, source-copy workflows, and agent-ready registry metadata.
|
|
82
|
+
- [CSS Variable Theme System for React — Base Themes](https://base-themes.bangwu.me/docs/token-system): Understand the Base Themes token architecture for surfaces, text, actions, radius, typography, dark mode, and custom React UI themes.
|
|
83
|
+
- [Accessible React UI Components — Base Themes](https://base-themes.bangwu.me/docs/accessibility): See how Base Themes builds on Base UI accessibility primitives and verifies focus states, keyboard behavior, contrast, SSR safety, and registry parity.
|
|
84
|
+
- [Migrate to Base Themes from shadcn, MUI, Chakra, or Custom CSS](https://base-themes.bangwu.me/docs/migration-guide): Adopt Base Themes incrementally with package CSS, data-style and data-theme tokens, component replacement slices, and registry-backed verification.
|
|
85
|
+
- [Figma and Design Token Handoff — Base Themes](https://base-themes.bangwu.me/docs/design-handoff): Use Base Themes CSS variables, preview assets, theme metadata, and registry files as a shared contract between design and implementation.
|
|
86
|
+
- [Security and Release Trust — Base Themes](https://base-themes.bangwu.me/docs/security): Review Base Themes vulnerability reporting, npm provenance, release checks, dependency posture, and registry trust boundaries before adopting the package.
|
|
87
|
+
- [Button React Component — Base Themes](https://base-themes.bangwu.me/components/button): An action primitive with semantic variants for primary commands, quiet actions, icons, and destructive-looking accents. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
88
|
+
- [Checkbox React Component — Base Themes](https://base-themes.bangwu.me/components/checkbox): A labeled boolean control with checked and unchecked visual states. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
89
|
+
- [Switch React Component — Base Themes](https://base-themes.bangwu.me/components/switch): A binary setting control for immediate on/off preferences. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
90
|
+
- [Slider React Component — Base Themes](https://base-themes.bangwu.me/components/slider): A range input with Base UI keyboard handling and tokenized track styling. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
91
|
+
- [Select React Component — Base Themes](https://base-themes.bangwu.me/components/select): A popover-backed single choice control with keyboard navigation and positioned content. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
92
|
+
- [Radio Group React Component — Base Themes](https://base-themes.bangwu.me/components/radiogroup): A grouped set of mutually exclusive choices. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
93
|
+
- [Toggle Group React Component — Base Themes](https://base-themes.bangwu.me/components/togglegroup): A compact multi-select control for formatting and segmented actions. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
94
|
+
- [Combobox React Component — Base Themes](https://base-themes.bangwu.me/components/combobox): A searchable listbox for quickly filtering component names. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
95
|
+
- [Input React Component — Base Themes](https://base-themes.bangwu.me/components/input): A styled Base UI input with optional label and helper text slots. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
96
|
+
- [Autocomplete React Component — Base Themes](https://base-themes.bangwu.me/components/autocomplete): A text input with filtered suggestions and inline selection behavior. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
97
|
+
- [Checkbox Group React Component — Base Themes](https://base-themes.bangwu.me/components/checkboxgroup): A shared state container for related checkboxes. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
98
|
+
- [Field React Component — Base Themes](https://base-themes.bangwu.me/components/field): A form field wrapper that connects label, control, description, and error state. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
99
|
+
- [Fieldset React Component — Base Themes](https://base-themes.bangwu.me/components/fieldset): A semantic grouping primitive for related form controls. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
100
|
+
- [Form React Component — Base Themes](https://base-themes.bangwu.me/components/form): A form root that integrates Base UI field validation and native submission. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
101
|
+
- [Number Field React Component — Base Themes](https://base-themes.bangwu.me/components/numberfield): A numeric input with increment and decrement controls. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
102
|
+
- [OTP Field React Component — Base Themes](https://base-themes.bangwu.me/components/otpfield): A one-time-password input with separate slots and paste handling. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
103
|
+
- [Radio React Component — Base Themes](https://base-themes.bangwu.me/components/radio): A single radio primitive for custom radio group compositions. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
104
|
+
- [Separator React Component — Base Themes](https://base-themes.bangwu.me/components/separator): A semantic divider for grouping content and toolbar controls. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
105
|
+
- [Toggle React Component — Base Themes](https://base-themes.bangwu.me/components/toggle): A single pressable on/off button for formatting and filters. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
106
|
+
- [Toolbar React Component — Base Themes](https://base-themes.bangwu.me/components/toolbar): A keyboard-aware toolbar for grouped commands and inputs. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
107
|
+
- [CSP Provider React Component — Base Themes](https://base-themes.bangwu.me/components/cspprovider): A provider for passing Content Security Policy nonce settings to Base UI internals. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
108
|
+
- [Direction Provider React Component — Base Themes](https://base-themes.bangwu.me/components/directionprovider): A provider that enables RTL or LTR behavior across Base UI components. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
109
|
+
- [Accordion React Component — Base Themes](https://base-themes.bangwu.me/components/accordion): Stacked disclosure panels for related sections of content. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
110
|
+
- [Collapsible React Component — Base Themes](https://base-themes.bangwu.me/components/collapsible): A single expandable region for optional detail. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
111
|
+
- [Dialog React Component — Base Themes](https://base-themes.bangwu.me/components/dialog): A modal layer with focus management and dismiss behavior. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
112
|
+
- [Alert Dialog React Component — Base Themes](https://base-themes.bangwu.me/components/alertdialog): A confirmation modal for actions that need explicit acknowledgement. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
113
|
+
- [Drawer React Component — Base Themes](https://base-themes.bangwu.me/components/drawer): A side panel for settings and secondary workflows. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
114
|
+
- [Popover React Component — Base Themes](https://base-themes.bangwu.me/components/popover): A lightweight positioned layer for contextual content. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
115
|
+
- [Preview Card React Component — Base Themes](https://base-themes.bangwu.me/components/previewcard): A hover or focus preview surface for linked resources. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
116
|
+
- [Tooltip React Component — Base Themes](https://base-themes.bangwu.me/components/tooltip): A small non-interactive label for controls and dense interfaces. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
117
|
+
- [Tabs React Component — Base Themes](https://base-themes.bangwu.me/components/tabs): A tablist for switching between related panels without navigating away. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
118
|
+
- [Menu React Component — Base Themes](https://base-themes.bangwu.me/components/menu): A command menu for grouped actions and disabled items. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
119
|
+
- [Context Menu React Component — Base Themes](https://base-themes.bangwu.me/components/contextmenu): A menu opened from a contextual right-click or keyboard context action. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
120
|
+
- [Menubar React Component — Base Themes](https://base-themes.bangwu.me/components/menubar): A horizontal application menu composed from Base UI menubar and menu primitives. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
121
|
+
- [Navigation Menu React Component — Base Themes](https://base-themes.bangwu.me/components/navmenu): A top-level navigation primitive with nested flyout items. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
122
|
+
- [Progress React Component — Base Themes](https://base-themes.bangwu.me/components/progress): A linear indicator for completion percentage and loading workflows. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
123
|
+
- [Meter React Component — Base Themes](https://base-themes.bangwu.me/components/meter): A semantic gauge for bounded measurements like storage or quota usage. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
124
|
+
- [Toast React Component — Base Themes](https://base-themes.bangwu.me/components/toast): A transient notification system with provider-managed state. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
125
|
+
- [Scroll Area React Component — Base Themes](https://base-themes.bangwu.me/components/scrollarea): A custom scroll container with consistent scrollbar styling across the site. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
126
|
+
- [Avatar React Component — Base Themes](https://base-themes.bangwu.me/components/avatar): A compact identity primitive with fallback initials and grouped presentation. Includes interactive examples, API reference, keyboard interactions, and themeable Base UI styling.
|
|
127
|
+
- [Bento React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/bento): Warm modular product cards with soft depth and teal controls. Preview the Bento visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
128
|
+
- [Shadcn React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/shadcn): Neutral zinc interface styling modeled after shadcn/ui. Preview the Shadcn visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
129
|
+
- [Neo Brutalism React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/neo-brutalism): Hard borders, loud accents, and offset block shadows. Preview the Neo Brutalism visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
130
|
+
- [Minimal React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/minimal): Swiss-inspired whitespace, thin rules, and quiet monochrome controls. Preview the Minimal visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
131
|
+
- [Enterprise React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/enterprise): Dense operational UI with blue actions and explicit boundaries. Preview the Enterprise visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
132
|
+
- [Linear React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/linear): Developer-tool polish with subtle gradients and refined dark mode. Preview the Linear visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
133
|
+
- [Glass React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/glass): Translucent surfaces, blur, and luminous focus states. Preview the Glass visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
134
|
+
- [Terminal React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/terminal): Monospace command-line interface with phosphor green command surfaces. Preview the Terminal visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
135
|
+
- [Material React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/material): Layered Google-style surfaces with blue primary actions and soft elevation. Preview the Material visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
136
|
+
- [Fluent React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/fluent): Microsoft-style acrylic surfaces, soft blue accents, and gentle borders. Preview the Fluent visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
137
|
+
- [Retro React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/retro): Early desktop UI cues with chunky controls and saturated classic colors. Preview the Retro visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
138
|
+
- [Cyberpunk React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/cyberpunk): Dark high-energy neon controls for expressive dashboards. Preview the Cyberpunk visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
139
|
+
- [Editorial React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/editorial): Magazine-like typography, ivory surfaces, and ink-forward contrast. Preview the Editorial visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
140
|
+
- [Calm React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/calm): Low-saturation wellness palette with relaxed controls and readable contrast. Preview the Calm visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
141
|
+
- [Data Dense React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/data-dense): Compact analytics styling for tables, filters, and repeated workflows. Preview the Data Dense visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
142
|
+
- [Playful React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/playful): Rounded, bright, friendly components for creative and education tools. Preview the Playful visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
143
|
+
- [Luxury React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/luxury): Dark premium surfaces, gold accents, and fine-line hierarchy. Preview the Luxury visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
144
|
+
- [Soft UI React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/soft-ui): Low-contrast tactile controls with inset and raised shadows. Preview the Soft UI visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
145
|
+
- [Bauhaus React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/bauhaus): Geometric composition with primary colors and strong graphic contrast. Preview the Bauhaus visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
146
|
+
- [Mono React UI Theme — Base Themes](https://base-themes.bangwu.me/themes/mono): Black-and-white ink system with no decorative color dependency. Preview the Mono visual style for typed Base UI React components, CSS tokens, and registry-ready product UI workflows.
|
|
147
|
+
- [Dashboard Shell React UI Block — Base Themes](https://base-themes.bangwu.me/blocks/dashboard-shell): Operational dashboard header with metrics, progress, and health status. Copy the Dashboard Shell block from Base Themes with accessible Base UI components, CSS tokens, and registry metadata.
|
|
148
|
+
- [Settings Form React UI Block — Base Themes](https://base-themes.bangwu.me/blocks/settings-form): Workspace settings form with fields, density selection, and switches. Copy the Settings Form block from Base Themes with accessible Base UI components, CSS tokens, and registry metadata.
|
|
149
|
+
- [Auth Card React UI Block — Base Themes](https://base-themes.bangwu.me/blocks/auth-card): Focused sign-in card with email, password, remembered device, and SSO action. Copy the Auth Card block from Base Themes with accessible Base UI components, CSS tokens, and registry metadata.
|
|
150
|
+
- [Pricing Panel React UI Block — Base Themes](https://base-themes.bangwu.me/blocks/pricing-panel): Compact pricing and upgrade panel for billing or plan-selection screens. Copy the Pricing Panel block from Base Themes with accessible Base UI components, CSS tokens, and registry metadata.
|
|
151
|
+
- [Data Table React UI Block — Base Themes](https://base-themes.bangwu.me/blocks/data-table): Small operational table with status filtering and row badges. Copy the Data Table block from Base Themes with accessible Base UI components, CSS tokens, and registry metadata.
|
|
152
|
+
- [Command Palette React UI Block — Base Themes](https://base-themes.bangwu.me/blocks/command-palette): Quick-action search panel for navigation, product commands, and agent workflows. Copy the Command Palette block from Base Themes with accessible Base UI components, CSS tokens, and registry metadata.
|
|
153
|
+
- [Team Activity Feed React UI Block — Base Themes](https://base-themes.bangwu.me/blocks/team-activity-feed): Recent workspace activity feed with team avatars and collaboration status. Copy the Team Activity Feed block from Base Themes with accessible Base UI components, CSS tokens, and registry metadata.
|
|
154
|
+
- [Theme Showcase Card React UI Block — Base Themes](https://base-themes.bangwu.me/blocks/theme-showcase-card): Theme value card with token swatches, tabs, and a theme CTA. Copy the Theme Showcase Card block from Base Themes with accessible Base UI components, CSS tokens, and registry metadata.
|
|
155
|
+
|
|
156
|
+
## Components
|
|
157
|
+
|
|
158
|
+
- [Button](https://base-themes.bangwu.me/components/button): registry name `button`; group Inputs; An action primitive with semantic variants for primary commands, quiet actions, icons, and destructive-looking accents.
|
|
159
|
+
- [Checkbox](https://base-themes.bangwu.me/components/checkbox): registry name `checkbox`; group Inputs; A labeled boolean control with checked and unchecked visual states.
|
|
160
|
+
- [Switch](https://base-themes.bangwu.me/components/switch): registry name `switch`; group Inputs; A binary setting control for immediate on/off preferences.
|
|
161
|
+
- [Slider](https://base-themes.bangwu.me/components/slider): registry name `slider`; group Inputs; A range input with Base UI keyboard handling and tokenized track styling.
|
|
162
|
+
- [Select](https://base-themes.bangwu.me/components/select): registry name `select`; group Inputs; A popover-backed single choice control with keyboard navigation and positioned content.
|
|
163
|
+
- [Radio Group](https://base-themes.bangwu.me/components/radiogroup): registry name `radio-group`; group Inputs; A grouped set of mutually exclusive choices.
|
|
164
|
+
- [Toggle Group](https://base-themes.bangwu.me/components/togglegroup): registry name `toggle-group`; group Inputs; A compact multi-select control for formatting and segmented actions.
|
|
165
|
+
- [Combobox](https://base-themes.bangwu.me/components/combobox): registry name `combobox`; group Inputs; A searchable listbox for quickly filtering component names.
|
|
166
|
+
- [Input](https://base-themes.bangwu.me/components/input): registry name `input`; group Inputs; A styled Base UI input with optional label and helper text slots.
|
|
167
|
+
- [Autocomplete](https://base-themes.bangwu.me/components/autocomplete): registry name `autocomplete`; group Inputs; A text input with filtered suggestions and inline selection behavior.
|
|
168
|
+
- [Checkbox Group](https://base-themes.bangwu.me/components/checkboxgroup): registry name `checkbox-group`; group Inputs; A shared state container for related checkboxes.
|
|
169
|
+
- [Field](https://base-themes.bangwu.me/components/field): registry name `field`; group Inputs; A form field wrapper that connects label, control, description, and error state.
|
|
170
|
+
- [Fieldset](https://base-themes.bangwu.me/components/fieldset): registry name `fieldset`; group Inputs; A semantic grouping primitive for related form controls.
|
|
171
|
+
- [Form](https://base-themes.bangwu.me/components/form): registry name `form`; group Inputs; A form root that integrates Base UI field validation and native submission.
|
|
172
|
+
- [Number Field](https://base-themes.bangwu.me/components/numberfield): registry name `number-field`; group Inputs; A numeric input with increment and decrement controls.
|
|
173
|
+
- [OTP Field](https://base-themes.bangwu.me/components/otpfield): registry name `otp-field`; group Inputs; A one-time-password input with separate slots and paste handling.
|
|
174
|
+
- [Radio](https://base-themes.bangwu.me/components/radio): registry name `radio`; group Inputs; A single radio primitive for custom radio group compositions.
|
|
175
|
+
- [Separator](https://base-themes.bangwu.me/components/separator): registry name `separator`; group Inputs; A semantic divider for grouping content and toolbar controls.
|
|
176
|
+
- [Toggle](https://base-themes.bangwu.me/components/toggle): registry name `toggle`; group Inputs; A single pressable on/off button for formatting and filters.
|
|
177
|
+
- [Toolbar](https://base-themes.bangwu.me/components/toolbar): registry name `toolbar`; group Inputs; A keyboard-aware toolbar for grouped commands and inputs.
|
|
178
|
+
- [CSP Provider](https://base-themes.bangwu.me/components/cspprovider): registry name `csp-provider`; group Feedback; A provider for passing Content Security Policy nonce settings to Base UI internals.
|
|
179
|
+
- [Direction Provider](https://base-themes.bangwu.me/components/directionprovider): registry name `direction-provider`; group Feedback; A provider that enables RTL or LTR behavior across Base UI components.
|
|
180
|
+
- [Accordion](https://base-themes.bangwu.me/components/accordion): registry name `accordion`; group Disclosure; Stacked disclosure panels for related sections of content.
|
|
181
|
+
- [Collapsible](https://base-themes.bangwu.me/components/collapsible): registry name `collapsible`; group Disclosure; A single expandable region for optional detail.
|
|
182
|
+
- [Dialog](https://base-themes.bangwu.me/components/dialog): registry name `dialog`; group Disclosure; A modal layer with focus management and dismiss behavior.
|
|
183
|
+
- [Alert Dialog](https://base-themes.bangwu.me/components/alertdialog): registry name `alert-dialog`; group Disclosure; A confirmation modal for actions that need explicit acknowledgement.
|
|
184
|
+
- [Drawer](https://base-themes.bangwu.me/components/drawer): registry name `drawer`; group Disclosure; A side panel for settings and secondary workflows.
|
|
185
|
+
- [Popover](https://base-themes.bangwu.me/components/popover): registry name `popover`; group Disclosure; A lightweight positioned layer for contextual content.
|
|
186
|
+
- [Preview Card](https://base-themes.bangwu.me/components/previewcard): registry name `preview-card`; group Disclosure; A hover or focus preview surface for linked resources.
|
|
187
|
+
- [Tooltip](https://base-themes.bangwu.me/components/tooltip): registry name `tooltip`; group Disclosure; A small non-interactive label for controls and dense interfaces.
|
|
188
|
+
- [Tabs](https://base-themes.bangwu.me/components/tabs): registry name `tabs`; group Navigation; A tablist for switching between related panels without navigating away.
|
|
189
|
+
- [Menu](https://base-themes.bangwu.me/components/menu): registry name `menu`; group Navigation; A command menu for grouped actions and disabled items.
|
|
190
|
+
- [Context Menu](https://base-themes.bangwu.me/components/contextmenu): registry name `context-menu`; group Navigation; A menu opened from a contextual right-click or keyboard context action.
|
|
191
|
+
- [Menubar](https://base-themes.bangwu.me/components/menubar): registry name `menubar`; group Navigation; A horizontal application menu composed from Base UI menubar and menu primitives.
|
|
192
|
+
- [Navigation Menu](https://base-themes.bangwu.me/components/navmenu): registry name `navigation-menu`; group Navigation; A top-level navigation primitive with nested flyout items.
|
|
193
|
+
- [Progress](https://base-themes.bangwu.me/components/progress): registry name `progress`; group Feedback; A linear indicator for completion percentage and loading workflows.
|
|
194
|
+
- [Meter](https://base-themes.bangwu.me/components/meter): registry name `meter`; group Feedback; A semantic gauge for bounded measurements like storage or quota usage.
|
|
195
|
+
- [Toast](https://base-themes.bangwu.me/components/toast): registry name `toast`; group Feedback; A transient notification system with provider-managed state.
|
|
196
|
+
- [Scroll Area](https://base-themes.bangwu.me/components/scrollarea): registry name `scroll-area`; group Feedback; A custom scroll container with consistent scrollbar styling across the site.
|
|
197
|
+
- [Avatar](https://base-themes.bangwu.me/components/avatar): registry name `avatar`; group Feedback; A compact identity primitive with fallback initials and grouped presentation.
|
|
198
|
+
|
|
199
|
+
## Product Blocks
|
|
200
|
+
|
|
201
|
+
- [Dashboard Shell](https://base-themes.bangwu.me/blocks/dashboard-shell): registry name `dashboard-shell`; export `DashboardShell`; category Application UI; Operational dashboard header with metrics, progress, and health status.
|
|
202
|
+
- [Settings Form](https://base-themes.bangwu.me/blocks/settings-form): registry name `settings-form`; export `SettingsForm`; category Forms; Workspace settings form with fields, density selection, and switches.
|
|
203
|
+
- [Auth Card](https://base-themes.bangwu.me/blocks/auth-card): registry name `auth-card`; export `AuthCard`; category Authentication; Focused sign-in card with email, password, remembered device, and SSO action.
|
|
204
|
+
- [Pricing Panel](https://base-themes.bangwu.me/blocks/pricing-panel): registry name `pricing-panel`; export `PricingPanel`; category Billing; Compact pricing and upgrade panel for billing or plan-selection screens.
|
|
205
|
+
- [Data Table](https://base-themes.bangwu.me/blocks/data-table): registry name `data-table`; export `DataTableBlock`; category Data Display; Small operational table with status filtering and row badges.
|
|
206
|
+
- [Command Palette](https://base-themes.bangwu.me/blocks/command-palette): registry name `command-palette`; export `CommandPaletteBlock`; category Command; Quick-action search panel for navigation, product commands, and agent workflows.
|
|
207
|
+
- [Team Activity Feed](https://base-themes.bangwu.me/blocks/team-activity-feed): registry name `team-activity-feed`; export `TeamActivityFeed`; category Collaboration; Recent workspace activity feed with team avatars and collaboration status.
|
|
208
|
+
- [Theme Showcase Card](https://base-themes.bangwu.me/blocks/theme-showcase-card): registry name `theme-showcase-card`; export `ThemeShowcaseCard`; category Marketing; Theme value card with token swatches, tabs, and a theme CTA.
|
|
209
|
+
|
|
210
|
+
## Themes
|
|
211
|
+
|
|
212
|
+
- [Bento](https://base-themes.bangwu.me/themes/bento): style `bento`; Warm modular product cards with soft depth and teal controls.
|
|
213
|
+
- [Shadcn](https://base-themes.bangwu.me/themes/shadcn): style `shadcn`; Neutral zinc interface styling modeled after shadcn/ui.
|
|
214
|
+
- [Neo Brutalism](https://base-themes.bangwu.me/themes/neo-brutalism): style `neo-brutalism`; Hard borders, loud accents, and offset block shadows.
|
|
215
|
+
- [Minimal](https://base-themes.bangwu.me/themes/minimal): style `minimal`; Swiss-inspired whitespace, thin rules, and quiet monochrome controls.
|
|
216
|
+
- [Enterprise](https://base-themes.bangwu.me/themes/enterprise): style `enterprise`; Dense operational UI with blue actions and explicit boundaries.
|
|
217
|
+
- [Linear](https://base-themes.bangwu.me/themes/linear): style `linear`; Developer-tool polish with subtle gradients and refined dark mode.
|
|
218
|
+
- [Glass](https://base-themes.bangwu.me/themes/glass): style `glass`; Translucent surfaces, blur, and luminous focus states.
|
|
219
|
+
- [Terminal](https://base-themes.bangwu.me/themes/terminal): style `terminal`; Monospace command-line interface with phosphor green command surfaces.
|
|
220
|
+
- [Material](https://base-themes.bangwu.me/themes/material): style `material`; Layered Google-style surfaces with blue primary actions and soft elevation.
|
|
221
|
+
- [Fluent](https://base-themes.bangwu.me/themes/fluent): style `fluent`; Microsoft-style acrylic surfaces, soft blue accents, and gentle borders.
|
|
222
|
+
- [Retro](https://base-themes.bangwu.me/themes/retro): style `retro`; Early desktop UI cues with chunky controls and saturated classic colors.
|
|
223
|
+
- [Cyberpunk](https://base-themes.bangwu.me/themes/cyberpunk): style `cyberpunk`; Dark high-energy neon controls for expressive dashboards.
|
|
224
|
+
- [Editorial](https://base-themes.bangwu.me/themes/editorial): style `editorial`; Magazine-like typography, ivory surfaces, and ink-forward contrast.
|
|
225
|
+
- [Calm](https://base-themes.bangwu.me/themes/calm): style `calm`; Low-saturation wellness palette with relaxed controls and readable contrast.
|
|
226
|
+
- [Data Dense](https://base-themes.bangwu.me/themes/data-dense): style `data-dense`; Compact analytics styling for tables, filters, and repeated workflows.
|
|
227
|
+
- [Playful](https://base-themes.bangwu.me/themes/playful): style `playful`; Rounded, bright, friendly components for creative and education tools.
|
|
228
|
+
- [Luxury](https://base-themes.bangwu.me/themes/luxury): style `luxury`; Dark premium surfaces, gold accents, and fine-line hierarchy.
|
|
229
|
+
- [Soft UI](https://base-themes.bangwu.me/themes/soft-ui): style `soft-ui`; Low-contrast tactile controls with inset and raised shadows.
|
|
230
|
+
- [Bauhaus](https://base-themes.bangwu.me/themes/bauhaus): style `bauhaus`; Geometric composition with primary colors and strong graphic contrast.
|
|
231
|
+
- [Mono](https://base-themes.bangwu.me/themes/mono): style `mono`; Black-and-white ink system with no decorative color dependency.
|
|
232
|
+
|
|
233
|
+
## Registry Item Examples
|
|
234
|
+
|
|
235
|
+
### Components
|
|
236
|
+
|
|
237
|
+
- [Accordion](https://base-themes.bangwu.me/registry/items/accordion.json)
|
|
238
|
+
- [Alert Dialog](https://base-themes.bangwu.me/registry/items/alert-dialog.json)
|
|
239
|
+
- [Autocomplete](https://base-themes.bangwu.me/registry/items/autocomplete.json)
|
|
240
|
+
- [Avatar](https://base-themes.bangwu.me/registry/items/avatar.json)
|
|
241
|
+
- [Button](https://base-themes.bangwu.me/registry/items/button.json)
|
|
242
|
+
- [Checkbox](https://base-themes.bangwu.me/registry/items/checkbox.json)
|
|
243
|
+
- [Checkbox Group](https://base-themes.bangwu.me/registry/items/checkbox-group.json)
|
|
244
|
+
- [Collapsible](https://base-themes.bangwu.me/registry/items/collapsible.json)
|
|
245
|
+
- [Combobox](https://base-themes.bangwu.me/registry/items/combobox.json)
|
|
246
|
+
- [Context Menu](https://base-themes.bangwu.me/registry/items/context-menu.json)
|
|
247
|
+
- [CSP Provider](https://base-themes.bangwu.me/registry/items/csp-provider.json)
|
|
248
|
+
- [Dialog](https://base-themes.bangwu.me/registry/items/dialog.json)
|
|
249
|
+
|
|
250
|
+
### Blocks
|
|
251
|
+
|
|
252
|
+
- [Dashboard Shell](https://base-themes.bangwu.me/registry/items/block-dashboard-shell.json)
|
|
253
|
+
- [Settings Form](https://base-themes.bangwu.me/registry/items/block-settings-form.json)
|
|
254
|
+
- [Auth Card](https://base-themes.bangwu.me/registry/items/block-auth-card.json)
|
|
255
|
+
- [Pricing Panel](https://base-themes.bangwu.me/registry/items/block-pricing-panel.json)
|
|
256
|
+
- [Data Table](https://base-themes.bangwu.me/registry/items/block-data-table.json)
|
|
257
|
+
- [Command Palette](https://base-themes.bangwu.me/registry/items/block-command-palette.json)
|
|
258
|
+
- [Team Activity Feed](https://base-themes.bangwu.me/registry/items/block-team-activity-feed.json)
|
|
259
|
+
- [Theme Showcase Card](https://base-themes.bangwu.me/registry/items/block-theme-showcase-card.json)
|
|
260
|
+
|
|
261
|
+
### Themes
|
|
262
|
+
|
|
263
|
+
- [Bento](https://base-themes.bangwu.me/registry/items/theme-bento.json)
|
|
264
|
+
- [Shadcn](https://base-themes.bangwu.me/registry/items/theme-shadcn.json)
|
|
265
|
+
- [Neo Brutalism](https://base-themes.bangwu.me/registry/items/theme-neo-brutalism.json)
|
|
266
|
+
- [Minimal](https://base-themes.bangwu.me/registry/items/theme-minimal.json)
|
|
267
|
+
- [Enterprise](https://base-themes.bangwu.me/registry/items/theme-enterprise.json)
|
|
268
|
+
- [Linear](https://base-themes.bangwu.me/registry/items/theme-linear.json)
|
|
269
|
+
- [Glass](https://base-themes.bangwu.me/registry/items/theme-glass.json)
|
|
270
|
+
- [Terminal](https://base-themes.bangwu.me/registry/items/theme-terminal.json)
|
|
271
|
+
|
|
272
|
+
## Agent Guardrails
|
|
273
|
+
|
|
274
|
+
- Do not scrape JSX when JSON metadata is available.
|
|
275
|
+
- Do not hard-code theme colors when a public `--bt-*` token exists.
|
|
276
|
+
- Do not source-copy a block without copying its registry component dependencies and style files.
|
|
277
|
+
- Do not mark adoption complete from local checks; use the public gate in the adoption dashboard.
|
|
278
|
+
- Prefer focused issues or gallery submissions when a real app exposes install, registry, block, theme, or accessibility friction.
|
|
279
|
+
|
|
280
|
+
## Feedback And Community Signals
|
|
281
|
+
|
|
282
|
+
- Repository and stars: https://github.com/markbang/base-themes
|
|
283
|
+
- Fork the repo: https://github.com/markbang/base-themes/fork
|
|
284
|
+
- Show and tell Discussion: https://github.com/markbang/base-themes/discussions/new?category=show-and-tell
|
|
285
|
+
- Feature request: https://github.com/markbang/base-themes/issues/new?template=feature_request.yml
|
|
286
|
+
- Bug report: https://github.com/markbang/base-themes/issues/new?template=bug_report.yml
|
|
287
|
+
- Community gallery submission: https://github.com/markbang/base-themes/issues/new?template=gallery_submission.yml
|
|
288
|
+
- Good first issues: https://github.com/markbang/base-themes/issues?q=is%3Aissue+state%3Aopen+label%3A%22type%3A+good+first+issue%22
|
package/llms.txt
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# Base Themes
|
|
2
|
+
|
|
3
|
+
Base Themes is a type-safe React component system built on Base UI. It ships accessible component wrappers, CSS-token themes, 20 curated visual styles, source-copyable registry metadata, blocks, examples, and agent-friendly customization workflows.
|
|
4
|
+
|
|
5
|
+
## Start Here
|
|
6
|
+
|
|
7
|
+
- [Install Base Themes](https://base-themes.bangwu.me/docs/installation)
|
|
8
|
+
- [Why Base Themes](https://base-themes.bangwu.me/docs/why-base-themes)
|
|
9
|
+
- [Base UI vs shadcn/ui](https://base-themes.bangwu.me/docs/base-ui-vs-shadcn)
|
|
10
|
+
- [Registry and source-copy workflow](https://base-themes.bangwu.me/docs/registry)
|
|
11
|
+
- [CLI usage](https://base-themes.bangwu.me/docs/cli)
|
|
12
|
+
- [Agent usage guide](https://base-themes.bangwu.me/docs/agent-usage)
|
|
13
|
+
- [Runnable examples](https://base-themes.bangwu.me/docs/examples)
|
|
14
|
+
- [Security and release trust](https://base-themes.bangwu.me/docs/security)
|
|
15
|
+
|
|
16
|
+
## Machine-Readable Metadata
|
|
17
|
+
|
|
18
|
+
- [Registry JSON](https://base-themes.bangwu.me/registry/registry.json)
|
|
19
|
+
- [Shadcn-compatible registry catalog](https://base-themes.bangwu.me/registry/shadcn-registry.json)
|
|
20
|
+
- [Block metadata JSON](https://base-themes.bangwu.me/registry/block-meta.json)
|
|
21
|
+
- [Component metadata JSON](https://base-themes.bangwu.me/registry/component-meta.json)
|
|
22
|
+
- [Static page metadata JSON](https://base-themes.bangwu.me/registry/static-page-meta.json)
|
|
23
|
+
- [Theme metadata JSON](https://base-themes.bangwu.me/registry/theme-meta.json)
|
|
24
|
+
- [Registry item example](https://base-themes.bangwu.me/registry/items/button.json)
|
|
25
|
+
- [Full agent context](https://base-themes.bangwu.me/llms-full.txt)
|
|
26
|
+
- [Sitemap](https://base-themes.bangwu.me/sitemap.xml)
|
|
27
|
+
|
|
28
|
+
## Common Components
|
|
29
|
+
|
|
30
|
+
- [Button](https://base-themes.bangwu.me/components/button)
|
|
31
|
+
- [Select](https://base-themes.bangwu.me/components/select)
|
|
32
|
+
- [Dialog](https://base-themes.bangwu.me/components/dialog)
|
|
33
|
+
- [Tabs](https://base-themes.bangwu.me/components/tabs)
|
|
34
|
+
- [Input](https://base-themes.bangwu.me/components/input)
|
|
35
|
+
|
|
36
|
+
## Useful Themes
|
|
37
|
+
|
|
38
|
+
- [Bento theme](https://base-themes.bangwu.me/themes/bento)
|
|
39
|
+
- [Enterprise theme](https://base-themes.bangwu.me/themes/enterprise)
|
|
40
|
+
- [Terminal theme](https://base-themes.bangwu.me/themes/terminal)
|
|
41
|
+
- [Data Dense theme](https://base-themes.bangwu.me/themes/data-dense)
|
|
42
|
+
|
|
43
|
+
## Product Blocks
|
|
44
|
+
|
|
45
|
+
- [Dashboard Shell block](https://base-themes.bangwu.me/blocks/dashboard-shell)
|
|
46
|
+
- [Data Table block](https://base-themes.bangwu.me/blocks/data-table)
|
|
47
|
+
- [Command Palette block](https://base-themes.bangwu.me/blocks/command-palette)
|
|
48
|
+
|
|
49
|
+
## Package Commands
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
npm install base-themes @base-ui/react react react-dom
|
|
53
|
+
npx base-themes list
|
|
54
|
+
npx base-themes list --json
|
|
55
|
+
npx base-themes plan button select block:dashboard-shell theme:enterprise
|
|
56
|
+
npx base-themes plan button select block:dashboard-shell theme:enterprise --json
|
|
57
|
+
npx base-themes add button select block:dashboard-shell theme:enterprise --target . --dry-run
|
|
58
|
+
npx base-themes add button select block:dashboard-shell theme:enterprise --target . --dry-run --json
|
|
59
|
+
npx base-themes doctor .
|
|
60
|
+
npx base-themes doctor . --json
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Integration Contract
|
|
64
|
+
|
|
65
|
+
- Import `base-themes/styles.css` once at app startup.
|
|
66
|
+
- Set `data-style` for visual system and `data-theme` for light or dark mode.
|
|
67
|
+
- Use `base-themes/registry.json`, `base-themes/shadcn-registry.json`, hosted registry JSON, or item JSON before source-copying files.
|
|
68
|
+
- Run registry, lint, test, build, SEO, and package smoke checks after applying changes.
|
|
69
|
+
- Use the Vite, dashboard, theme-customization, Next.js, and registry-copy examples to verify real integration paths.
|
|
70
|
+
|
|
71
|
+
## Feedback And Community Signals
|
|
72
|
+
|
|
73
|
+
- [Repository](https://github.com/markbang/base-themes)
|
|
74
|
+
- [Fork the repo](https://github.com/markbang/base-themes/fork)
|
|
75
|
+
- [Show and tell Discussion](https://github.com/markbang/base-themes/discussions/new?category=show-and-tell)
|
|
76
|
+
- [Feature request](https://github.com/markbang/base-themes/issues/new?template=feature_request.yml)
|
|
77
|
+
- [Bug report](https://github.com/markbang/base-themes/issues/new?template=bug_report.yml)
|
|
78
|
+
- [Community gallery submission](https://github.com/markbang/base-themes/issues/new?template=gallery_submission.yml)
|
|
79
|
+
- [Good first issues](https://github.com/markbang/base-themes/issues?q=is%3Aissue+state%3Aopen+label%3A%22type%3A+good+first+issue%22)
|