v0.3.0 — Accordion, Tabs, Popover, Dialog & Separator

What's New in v0.3.0

5 New Components

Accordion

• +/− font-mono indicator (not chevron) — Endfield aesthetic
• animate-accordion-down/animate-accordion-up animations
• type="single"|"multiple", collapsible, defaultValue props
• Sub-components: Accordion, AccordionItem, AccordionTrigger, AccordionContent

Tabs

• 3 variant options: underline (default), pill, bordered
• CVA variants on both TabsList and TabsTrigger
• Sub-components: Tabs, TabsList, TabsTrigger, TabsContent
• Exports: tabsListVariants, tabsTriggerVariants

Popover

• bg-surface-2 border border-white/10 shadow-lg p-4 min-w-[200px]
• data-[state=open]:animate-fade-in-up entrance animation
• Sub-components: Popover, PopoverTrigger, PopoverContent, PopoverAnchor

Dialog

• 5 size variants: sm, md (default), lg, xl, fullscreen
• Overlay: bg-black/75 backdrop-blur-sm
• Full anatomy: Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose
• Exports: dialogContentVariants

Separator

• 5 variant options: default, subtle, strong, glow, accent
• Glow: bg-gradient-to-r from-transparent via-primary/40 to-transparent
• orientation: horizontal (default) / vertical
• Exports: separatorVariants

Stats

• 400 tests across 11 test files (+58 new tests)
• 62.00 kB MJS (gzip: 13.34 kB) — under 70 kB target
• 0 TypeScript errors, 0 ESLint errors
• All components: forwardRef + displayName

New Peer Dependencies

@radix-ui/react-accordion
@radix-ui/react-tabs
@radix-ui/react-popover
@radix-ui/react-dialog
@radix-ui/react-separator

Installation

npm install reend-components

Full Component List (v0.3.0)

Button, Badge, Card, Input, Textarea, Checkbox, RadioGroup, Switch, Select, Avatar, Progress, Accordion, Tabs, Popover, Dialog, Separator + 11 Signature components