Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Veterinarian Services by Species Profile Block for Ark UI

A vet profile as a species-by-service matrix: a group of five species, a table of ten services marked Offered or Not offered with the words and an icon and a price from, and figures for the count, the cheapest service and the emergency hours.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let a pet owner see at a glance what a clinic does for their animal, with this veterinarian profile for React with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the vet: initials, name, role and clinic. A strip of cells on shared hairlines shows three figures that follow the choice: how many of the ten services are offered for the species ("7 of 10"), the cheapest service, and the emergency line, whose hours are typed and whose first line says when it opens today. A single-choice Toggle Group of five species chips sits above a native Table of the same ten services for every species: each is marked Offered or Not offered with an icon and the words, never colour alone, and the price from is at the end. A polite line says what each pick came to. On a phone the species chips scroll sideways and the price folds under the service name. It's built from Toggle Group, Table, Status, Avatar and Guides, with a CSS entrance only. It is a sample clinic: the services, prices and hours are invented. For a vet-clinic site, a pet-care directory or any profile that offers different things to different groups.

FAQ

How do I fill it with my own services?

Edit SERVICES and SPECIES. Each service has a name and a prices map from a species to the price from; a species that is missing from the map is not offered the service, so the Offered words, the count and the cheapest price are all worked out from it. NIGHTS holds the emergency line's hours on weekdays, weekends are all day, and AS_OF is the day the page treats as today, so the first line of the emergency cell is worked out from its weekday and never from the clock.

Why are the same ten rows shown for every species?

So the table never changes height and a visitor can compare: a service that a species is not offered stays in its row, quietly, with a dash and the words Not offered. Picking another species only changes the words, the prices and the three figures above, never the layout. A row that is not offered has no price, and its price cell reads No price to a screen reader.

Is anything booked or checked?

No. Picking a species only changes what the page shows, and the polite status line says what it came to, such as Rabbits: 7 of 10 services. The clinic, the vet, the prices and the hours are invented. To make it real, load the services from your own price list, and link the emergency cell to a number your staff answer.

How do I use the species group with a keyboard?

The group is one tab stop. Arrow keys move between the species and choose as they go, Home and End jump to the first and last, and the chosen species is always one of the five, so the table is never left without an answer. In a right-to-left layout the arrow keys follow the reading direction. On Ark the arrow keys always move to the next item in the order shown, whatever the direction.

Is the table accessible?

It is a native table with a hidden caption, column heads, and the service as each row's header, wrapped in a labelled region that scrolls if it must. Offered is a check and the word, Not offered is a dash and the words, and a price is read as a figure with a dollar sign. In a right-to-left layout the prices keep their order. The emergency dot is decorative: the hours are written out.

How does it look on a phone?

The three figures sit two over one, the species chips scroll sideways with the next chip peeking, and the table drops its price column: each service's price from is written under its name instead. Every species has the same ten rows, so the page keeps its height when you switch.