@beeads/ui
v0.5.0
Published
Componentes UI do design system beeads — primitivos sobre @base-ui/react
Downloads
1,257
Readme
@beeads/ui
Componentes UI do design system beeads — primitivos sobre @base-ui/react.
Uso
pnpm add @beeads/ui @beeads/tokensNo globals.css:
@import "@beeads/ui/styles.css";Em app/layout.tsx:
import { ThemeProvider, Toaster } from "@beeads/ui";
export default function RootLayout({ children }) {
return (
<html lang="pt-BR" suppressHydrationWarning>
<body>
<ThemeProvider>
{children}
<Toaster />
</ThemeProvider>
</body>
</html>
);
}Em qualquer componente:
import { Button, Card, Dialog, DialogContent, DialogTrigger } from "@beeads/ui";
<Dialog>
<DialogTrigger render={(props) => <Button {...props}>Abrir</Button>} />
<DialogContent>
<p>Olá!</p>
</DialogContent>
</Dialog>Componentes disponíveis
- Forms: Button, Input, Textarea, Label, Checkbox, Switch, RadioGroup, Select, Field, Slider
- Overlays: Dialog, Sheet, Drawer, Popover, Tooltip, DropdownMenu, AlertDialog, Command
- Layout: Card, Separator, Tabs, Accordion, Avatar, Breadcrumb, Pagination, Collapsible, ScrollArea
- Feedback: Badge, Skeleton, Alert, Spinner, Empty, Progress, Toaster (
toast()) - Date: Calendar, DatePicker
- Utilities:
cn(),ThemeProvider,useTheme()
API base-ui
Componentes que precisam de render-as-child (passar trigger customizado) usam o pattern render do base-ui (não asChild):
<PopoverTrigger render={(props) => <Button {...props}>Abrir popover</Button>} />Veja Storybook para variantes e exemplos.