Out of Stock
Angus Beef Tenderloin 8 oz
Black Angus Ranch
BAR-001·8 OZ
$34.99
Chefs Design System
Component showcase - consuming @luminos-labs/chefs-design-system from packages/ui
Breadcrumb
Button
Alert
The app mounts the AlertToaster provider once for toast delivery, then triggers toasts anywhere in client code with the exported alert helpers. For in-flow messaging above or below page content, render AlertNotice directly in the DOM.
This demo also mounts two named toaster stacks: global at the top-right for general notifications and cart at the bottom-center for local workflow alerts. Each trigger chooses its stack with toasterId.
Inline notice
Render this directly above or below a form when the message should stay in document flow.
Link
Stepper
Type a value outside the allowed range to see the error feedback state, or use the increment and decrement buttons to step within the configured bounds.
Button Group
Button Group shows adjacent segmented actions using the design-system primitive in icon-and-label, label-only, and icon-only layouts.
Button Switch
Single option
Dual option
Disabled states
Variant Selector
Size:
10 oz
Color:
Midnight Blue
Icon
cart
search
person
heart
bag
star
house
envelope
Close Button
Checkbox
Radio
Medium (default)
Large
Badge
Chefs' WarehouseChefs' WarehouseChefs' WarehouseChefs' Warehouse
OutlineIn stockLimitedTop PicksBackorder
8888888888
Tag
Static
TagTagTagAvailableAvailableAvailable
Interactive
Card Container
Static card
Non-interactive card shell with default border.
Dynamic card
Adds hover border + glow shadow. Try hovering.
Modal
Dropdown
Field trigger — single select
Field trigger — multi select (checkbox)
Field trigger — disabled
Icon trigger — action menu (right-aligned)
Icon trigger — navigation links (MenuItemLink)
Singleton — only one dropdown open at a time
Input
Enter your legal first name
Select a category
Use your work email
This field is required
Pick one option
Progress Bar
Color display
Neutral display
Tooltip
Simple — Top (with arrow)
Simple — Bottom (no arrow)
Simple — Left
Rich — Hover trigger with title and icon
Rich — Click trigger with actions
Logo
Site Alert
Free shipping on all orders over $250 — this week only.
Learn moreYour order has been placed — thank you for shopping with us.
View orderScheduled maintenance Sunday 2–4 AM ET; brief downtime expected.
Learn moreWe are experiencing a temporary service disruption. We are on it.
Status pageProduct Card
Out of Stock
Angus Beef Tenderloin 8 oz
Black Angus Ranch
BAR-001·8 OZ
$34.99
Organic
Organic Baby Spinach 5 lb Bag
Earthbound Farm
EBF-202·5 LB
Last purchased 05/22/2026. 2 Cases in cart.
$18.50
Cut to Order
San Marzano Crushed Tomatoes 28 oz
Cento
CEN-330·28 OZ
$52.00
Baby Purple Carrots with Tops
Heirloom Farms
HF-purple-carrots·24 Count
$44.09
Product Card — List Orientation
Premium
Premium Saffron Threads 1g
Persian Saffron Co
PSC-001·1 G
$125.00
Specialty
Italian Truffle Oil 250ml
Tartufi Hunter
TH-250·250 ML
1 Bottle in cart
$78.50
Out of Stock
Vintage Aged Balsamic Vinegar 750ml
Modena Select
MS-750·750 ML
$95.00
Tabs
Default Style
Premium Beef Brisket
Sourced from premium ranches, our beef brisket is hand-selected for quality and flavor. Perfect for slow-cooking, smoking, or braising.
Cut: Full Packer Brisket
Weight: 12-16 lbs
Grade: Prime
Packaging: Vacuum sealed
Storage: Keep frozen until 48 hours before use
Excellent quality
Consistently great cuts. Highly recommended for restaurant use.
Best for catering
Perfect marbling and size for large events.
Default Style with Overflow (20 Tabs)
Content for Tab 1. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 2. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 3. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 4. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 5. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 6. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 7. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 8. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 9. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 10. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 11. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 12. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 13. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 14. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 15. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 16. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 17. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 18. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 19. Scroll the tab list left and right using the arrow buttons to see all tabs.
Content for Tab 20. Scroll the tab list left and right using the arrow buttons to see all tabs.
Filled Style
Content for option 1
Content for option 2
This tab is disabled
Pagination
Sample list (showing 10 items per page, 247 total items)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Page 1 of 25
Pagination variants (small set)
Default (siblingCount=0)
With siblings (siblingCount=1)
Custom pages array
