Chefs Design System

Component showcase - consuming @luminos-labs/chefs-design-system from packages/ui

Breadcrumb

  2. /
  3. Products
  4. /
  5. Knives
  2. /
  3. Products
  4. /
  5. Knives

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

DefaultInformationSuccessWarningError
Inline defaultLarge 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

Completion: 25%
Completion: 60%
Completion: 100%

Neutral display

Completion: 40%

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 more
Your order has been placed — thank you for shopping with us.
View order
Scheduled maintenance Sunday 2–4 AM ET; brief downtime expected.
Learn more
We are experiencing a temporary service disruption. We are on it.
Status page

Product Card

Out of Stock
Angus Beef Tenderloin 8 oz

Angus Beef Tenderloin 8 oz

Black Angus Ranch

BAR-001·8 OZ

$34.99

Out of Stock
Angus Beef Tenderloin 8 oz

Angus Beef Tenderloin 8 oz

Black Angus Ranch

BAR-001·8 OZ

$34.99

Organic
Organic Baby Spinach 5 lb Bag

Organic Baby Spinach 5 lb Bag

Earthbound Farm

EBF-202·5 LB

Last purchased 05/22/2026. 2 Cases in cart.

$18.50

Organic
Organic Baby Spinach 5 lb Bag

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

San Marzano Crushed Tomatoes 28 oz

Cento

CEN-330·28 OZ

$52.00

Cut to Order
San Marzano Crushed Tomatoes 28 oz

San Marzano Crushed Tomatoes 28 oz

Cento

CEN-330·28 OZ

$52.00

Baby Purple Carrots with Tops

Baby Purple Carrots with Tops

Heirloom Farms

HF-purple-carrots·24 Count

$44.09

Baby Purple Carrots with Tops

Baby Purple Carrots with Tops

Heirloom Farms

HF-purple-carrots·24 Count

$44.09

Product Card — List Orientation

Premium
Premium Saffron Threads 1g

Premium Saffron Threads 1g

Persian Saffron Co

PSC-001·1 G

$125.00

Premium
Premium Saffron Threads 1g

Premium Saffron Threads 1g

Persian Saffron Co

PSC-001·1 G

$125.00

Specialty
Italian Truffle Oil 250ml

Italian Truffle Oil 250ml

Tartufi Hunter

TH-250·250 ML

1 Bottle in cart

$78.50

Specialty
Italian Truffle Oil 250ml

Italian Truffle Oil 250ml

Tartufi Hunter

TH-250·250 ML

1 Bottle in cart

$78.50

Out of Stock
Vintage Aged Balsamic Vinegar 750ml

Vintage Aged Balsamic Vinegar 750ml

Modena Select

MS-750·750 ML

$95.00

Out of Stock
Vintage Aged Balsamic Vinegar 750ml

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

Resources

  • Become a Customer
  • Regions We Serve

Learn More

  • Allen Brothers

© 2026 The Chefs' Warehouse