shadcn.io is not affiliated with official shadcn/ui
Square Grid Profile Gallery Block for Svelte
A drawing-sharing profile: an avatar, a bio, posts, followers and following, a Follow toggle that adds one, and Posts, Reels and Saved tabs over a three-column square grid that opens one viewer.
Installation
Overview
A square-grid profile for Svelte with Ark UI, for Doodlebay, a drawing-sharing app. A split with the profile at the start and, beside a hairline divider, three tabs (Posts, Reels and Saved) over a three-column grid of square drawings on shared hairlines. The profile has a compact header, an initials avatar, a name and handle, a short bio, a list of posts, followers and following, and a Follow toggle that adds one to the follower count and takes it back. Some posts carry a "several pictures" mark, one is pinned, and reels carry a play mark and a length. Every square is a button that opens one viewer dialog: the whole drawing, its title and date, Previous and Next through the tab's own posts, a counter, arrow keys and Escape, and focus goes back to the square last shown. The tabs hold one height, so switching never moves the page. The drawings are pen-and-ink in your theme's own greys, not photographs. Following and the follower count are local to the page: nothing is saved. Reels carry no video; the viewer says so. It's built from Tabs, Toggle, Avatar, Dialog, Button and Guides. The app, the people, the handles and the posts are made up for the example.
FAQ
How do I use my own posts?
Each post in POSTS, REELS and SAVED has a title, a caption, a handle, an ISO date, a count of pictures, a pinned flag, a reel length in clip and a scene. Add your image's address and replace the Scene in the square and in the viewer with an <img> (alt="" in the square, whose button is named; alt set to the caption in the viewer). The comment above Scene says where.
What does the Follow button do?
It is a toggle with an aria-pressed state: it fills with the foreground, swaps its icon for a tick, and adds one to the follower count, which a polite line also announces. Pressing it again takes the follow back. Nothing is sent anywhere; wire the handler to your own follow request.
How does the viewer work?
There is one dialog. A square sets the tab and the position and opens it; Previous, Next, the arrow keys (mirrored in a right-to-left layout), Home, End and a swipe move through that tab's posts, wrapping around. Closing it returns focus to the square of the post last shown. On a phone the viewer fills the screen.
Do the tabs change the page's height?
No. Each tab's grid is also in the page as an unseen set of empty squares, stacked in the same grid cell as the live panels: the tallest sets the height. Posts has nine drawings, so the other two tabs sit on the same height.
Do reels play?
No, and the viewer says so: a reel is a poster with a play mark and a length, with the text "this demo has no video". Put your video in the viewer's stage where the drawing is.
How does it work with a keyboard?
The tabs are arrow-key navigable (Home and End too). Every square is a button, so Tab reaches each one and Enter or Space opens the viewer; its Tab order is the close button, Previous and Next. The marks on a square are decorative; the button's name says "pinned", the picture count and the reel length.