shadcn.io is not affiliated with official shadcn/ui
Pet Census Team Block for Svelte
The pets of a pet-sitting network: a census of dogs, cats and everything else as counted bars, a framed pet of the week and a two-column roster with a drawn mark, a breed and an owner for each.
Installation
Overview
A getting-to-know-you section for Svelte with Ark UI, for Tailwick, a pet-sitting network. The first column holds a title, a sentence counted from the data ("9 pets, and dogs lead"), a census of dogs, cats and everything else, each with a count and a bar drawn to its share of all the pets, and a line about the Friday vote. After a hairline divider the second column leads with a framed cell for the pet of the week (a drawn mark in a tile, a badge, a name, a breed, the owner and a sentence), then a roster of everyone else in two columns that share their hairlines and end the block: each pet has a drawn mark, a name, a breed and its owner as an initials avatar. On a phone the roster is one column, shows four pets and a Show all button. It's built from Progress, Avatar, Badge, Button and Guides, with CSS transitions and your theme's tokens for every colour. The people and the pets are made up for the example.
FAQ
How do I change the pets?
Edit PETS at the top of the file. A pet is a name, a breed, a mark (the drawing: dog, cat, rabbit or bird), a species (dog, cat or other, for the census), an owner and a note; one pet has week: true and leads. The census counts, the bar lengths and the sentence in the header are all worked out from that list, so adding a pet needs no other change.
What do the bars show?
Each bar is a share of all the pets, drawn with the Progress component in the theme's foreground colour, and it is named in words for a screen reader ("Dogs: 4 of 9 pets"). The count beside it is the same number as text.
Why drawn marks and not photos?
Marks and initials keep the wall calm and the same on every page, and nobody has to supply a photo. If you want pictures, put an AvatarImage before the fallback in the owner's avatar; for a pet, swap the tile's icon for an img with empty alt text, since the name is next to it.
How does it fit on a phone?
Below sm the roster is one column and shows the first four pets; a Show all button under it opens the other four. The button says whether the list is expanded and which list it controls, and its label stays the same. The census sits above the pet of the week, so the counts come first. Nothing scrolls sideways at 320 pixels.
How is the roster's last row closed?
Each pet draws its own end and bottom borders and a wrapper clips the last ones, so the page's rails close the sides and the next block's top rule closes the foot, with no doubled line. With an odd number of pets the last row holds one, and the divider between the columns still runs down it.