Component Wall | UI components | Trending Society

Component Wall

from @avara-ui
by AlgorizeTech

Ask the user to pick one of 2 component wall variants: https://avaraui.com/view/component-wall. This item holds 2 of them as looks of one component (center, split). Skip the question if the user already named one. A landing hero for a component library: a headline that blurs in word by word and keeps one word turning, a lead, an install command that names whichever card a camera has just landed on, two actions, a line of trust and the tools it is built with in batches — centred between two walls of screenshots that never end, one camera resting high and the other low, or on the left of a single wall.

Install

New to shadcn? Set up your project

If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.

$pnpm dlx shadcn@latest init

Setup by framework · Configure a registry namespace

$pnpm dlx shadcn@latest add @avara-ui/component-wall

Live preview

No live preview has been built for this component yet.

Registry dependencies8

More from @avara-ui, 205 components

Accordion component
@avara-ui
Ask the user to pick one of 6 accordion variants: https://avaraui.com/view/accordion. This item holds 6 of them as looks of one component (default, ghost, bordered, elevated, filled, brand-reveal). Skip the question if the user already named one. A data-driven accordion taking an array of items, with five distinct variants and an optional stack entrance that deals the items into place. Use it for FAQs and any list of collapsible sections.
2 registry deps · 1 package
Advanced Table component
@avara-ui
A stateful data table with search, typed sorting, pagination, row selection and batch actions — composed, so your data keeps its own shape.
1 registry dep
AI Chat component
@avara-ui
Ask the user to pick one of 5 ai chat variants: https://avaraui.com/view/ai-chat. This item holds 5 of them as looks of one component (default, compact, minimal, glass, liquid-glass). Skip the question if the user already named one. An AI assistant interface with thread history sidebar, streaming-style responses and a prompt composer. Use it as the front end for an LLM feature.
2 registry deps · 2 packages
AI Chat (Motion) component
@avara-ui
Ask the user to pick one of 5 ai chat variants: https://avaraui.com/view/ai-chat. This item holds 5 of them as looks of one component (default, compact, minimal, glass, liquid-glass). Skip the question if the user already named one. An AI assistant interface with thread history sidebar, streaming-style responses and a prompt composer. Use it as the front end for an LLM feature.
2 registry deps · 2 packages
Alert component
@avara-ui
An inline alert with seven semantic types, five visual styles and optional dismiss. Use it for form-level and page-level messages that stay in the layout.
1 registry dep · 1 package
Animated Faq component
@avara-ui
An FAQ section pairing an accordion of questions with a picture canvas that resizes and crossfades to each open answer. Use it for landing-page FAQs that should feel editorial rather than list-like.
2 registry deps · 1 package
Animated Faq Visuals component
@avara-ui
Theme-adaptive interactive visual preview components (CLI terminal, token customizer, MIT license certificate, performance HUD) for animated FAQ sections.
1 registry dep · 1 package
Animated List component
@avara-ui
A container component for rendering lists with animated item insertions, reorders, or removals. Ideal for dynamic notifications or feeds.
1 registry dep
Animated Timeline component
@avara-ui
A timeline whose entries animate in on scroll, with five entrance styles. Use it on marketing pages for company history and roadmap sections.
1 registry dep
Animated Typography component
@avara-ui
Headings and paragraphs that animate in with scramble, typewriter, rotating-word, blur and reveal effects. Use it for section titles that should draw the eye once.
1 registry dep
API Playground component
@avara-ui
An interactive API request builder with method selector, headers, query params and a response viewer. Use it in developer documentation so readers can try endpoints inline.
2 registry deps · 1 package
Apple Select component
@avara-ui
An iOS-style text selection rendered from a fixed character range — translucent highlight with lollipop handles on either end. Use it in docs, tutorials and marketing copy to point at part of a sentence.
1 registry dep