Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Chef Dietary Menu Profile Block for Ark UI

A chef profile as a menu with a dietary filter: toggle chips for vegetarian, vegan, gluten-free and nut-free that narrow eight signature dishes with prices, tags and a line each, a live count, an empty state, a three-job career and an enquiry button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show what a kitchen can serve a guest, with this chef profile for React with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the chef: initials, name, role, place and a badge for the guide's rating. A band holds a Toggle Group of four diets as chips you press in any combination, with the count of dishes beside it, "5 of 8 dishes". The list under it shows only the dishes that carry every diet you pressed, each with its price, a line about it and its diet tags as outline Badges; a combination nothing satisfies shows an Empty state with a way back. An unseen copy of the whole menu sits in the same space, so the panel keeps its height for every filter. A career band lists three jobs, and the foot, ruled by Guides, holds a polite status line and an outline button to ask about the tasting menu. It's built from Toggle Group, Badge, Empty, Button, Avatar and Guides, with a CSS entrance only. For a restaurant site, a chef's table page or any profile with a menu to narrow.

FAQ

How do I use my own dishes and diets?

Edit DISHES and TAGS at the top. Each dish has a name, a price in euros, a line and a list of every tag it carries; a vegan dish lists vegetarian too, and the page shows only vegan on it. Add a tag to TAGS and to the dishes that carry it, and the chip, the filter and the count follow. Prices are formatted for the euro; change the currency in the formatter for yours.

How does the filter combine?

A dish must carry every diet you pressed, so Vegetarian and Gluten-free shows only dishes that are both. Press a chip again to drop it. The count is worked out from the list, and the status line says it politely, for example Showing 4 of 8 dishes.

What does the enquiry button do?

Nothing leaves the page. It sets the status line to Enquiry noted, nothing was sent. To make it real, open your booking form or send the pressed diets and the dish list from the button's handler. The three lanterns are an invented guide's rating, not a real one.

Why does the panel not change height when I filter?

An unseen copy of the full menu shares the same space as the visible list, so the panel is always as tall as the whole menu. Filtering to nothing shows the empty state inside the same room, with a Clear filters button.

Is it accessible?

The chips are a group named Diet, each a toggle button that reports whether it is pressed, and they work with the arrow keys and Space. The dishes and their tags are lists, prices keep their order in a right-to-left layout, and the status line is a polite live region present from the start. The unseen copy is hidden from assistive technology.

How does it look on a phone?

The chips scroll sideways in one row with the next one peeking, the dishes stay one per row, and the enquiry button fills the foot.

All 100 profile blocks