@bearmenu/ui
v0.5.1
Published
BearMenu design system — shared UI tokens, primitives, and components
Readme
@bearmenu/ui
Shared design system for BearMenu — UI tokens, primitives, and components built on Radix UI and Tailwind CSS.
Install
npm i @bearmenu/uiSetup
Import the global styles in your root layout:
import "@bearmenu/ui/globals.css";Usage
import { Button } from "@bearmenu/ui/components/button";
import { Card, CardHeader, CardTitle, CardContent } from "@bearmenu/ui/components/card";
import { Input } from "@bearmenu/ui/components/input";Components
| Component | Import |
| --- | --- |
| Accordion | @bearmenu/ui/components/accordion |
| Alert | @bearmenu/ui/components/alert |
| Alert Dialog | @bearmenu/ui/components/alert-dialog |
| Aspect Ratio | @bearmenu/ui/components/aspect-ratio |
| Avatar | @bearmenu/ui/components/avatar |
| Badge | @bearmenu/ui/components/badge |
| Breadcrumb | @bearmenu/ui/components/breadcrumb |
| Button | @bearmenu/ui/components/button |
| Calendar | @bearmenu/ui/components/calendar |
| Card | @bearmenu/ui/components/card |
| Carousel | @bearmenu/ui/components/carousel |
| Checkbox | @bearmenu/ui/components/checkbox |
| Collapsible | @bearmenu/ui/components/collapsible |
| Command | @bearmenu/ui/components/command |
| Currency Input | @bearmenu/ui/components/currency-input |
| Dialog | @bearmenu/ui/components/dialog |
| Drawer | @bearmenu/ui/components/drawer |
| Dropdown Menu | @bearmenu/ui/components/dropdown-menu |
| Empty State | @bearmenu/ui/components/empty-state |
| Form | @bearmenu/ui/components/form |
| Haptic Button | @bearmenu/ui/components/haptic-button |
| Input | @bearmenu/ui/components/input |
| Input OTP | @bearmenu/ui/components/input-otp |
| Label | @bearmenu/ui/components/label |
| Lazy Markdown | @bearmenu/ui/components/lazy-markdown |
| Link Button | @bearmenu/ui/components/link-button |
| Markdown Renderer | @bearmenu/ui/components/markdown-renderer |
| Multi-Select Combobox | @bearmenu/ui/components/multi-select-combobox |
| Pagination | @bearmenu/ui/components/pagination |
| Popover | @bearmenu/ui/components/popover |
| Progress | @bearmenu/ui/components/progress |
| Radio Group | @bearmenu/ui/components/radio-group |
| Rating | @bearmenu/ui/components/rating |
| Scroll Area | @bearmenu/ui/components/scroll-area |
| Search Bar | @bearmenu/ui/components/search-bar |
| Searchable Select | @bearmenu/ui/components/searchable-select |
| Select | @bearmenu/ui/components/select |
| Separator | @bearmenu/ui/components/separator |
| Sheet | @bearmenu/ui/components/sheet |
| Skeleton | @bearmenu/ui/components/skeleton |
| Skeleton Card | @bearmenu/ui/components/skeleton-card |
| Slider | @bearmenu/ui/components/slider |
| Sliding Panels | @bearmenu/ui/components/sliding-panels |
| Sonner | @bearmenu/ui/components/sonner |
| Sticky Container | @bearmenu/ui/components/sticky-container |
| Switch | @bearmenu/ui/components/switch |
| Table | @bearmenu/ui/components/table |
| Tabs | @bearmenu/ui/components/tabs |
| Text | @bearmenu/ui/components/text |
| Textarea | @bearmenu/ui/components/textarea |
| Toast | @bearmenu/ui/components/toast |
| Toaster | @bearmenu/ui/components/toaster |
| Toggle | @bearmenu/ui/components/toggle |
| Toggle Group | @bearmenu/ui/components/toggle-group |
| Tooltip | @bearmenu/ui/components/tooltip |
Hooks
| Hook | Import |
| --- | --- |
| useHaptic | @bearmenu/ui/hooks/use-haptic |
| useMobile | @bearmenu/ui/hooks/use-mobile |
| useMountedTheme | @bearmenu/ui/hooks/use-mounted-theme |
| useSticky | @bearmenu/ui/hooks/use-sticky |
Utilities
import { cn } from "@bearmenu/ui/lib/utils";Peer Dependencies
This package expects the following in your project:
- React 18+ or 19+
- Next.js 14+
- Tailwind CSS 4+
- Radix UI primitives
- Framer Motion 12+
See package.json for the full list of peer dependencies.
License
UNLICENSED
