sh4dcnv2 · atlas
← libraries

@tessli

Sections, pages and components on shadcn/ui primitives, each with notes on when to use it, when not to, the UI rules it follows and the generic default it replaces. Also installs a compact rules file, TESSLI.md.

13 components pro available react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://tessli.vercel.app/r/registry.json
pnpm pnpm dlx shadcn@latest add https://tessli.vercel.app/r/registry.json
bun bunx shadcn@latest add https://tessli.vercel.app/r/registry.json
fetch registry curl -s https://tessli.vercel.app/r/registry.json

Components

13 total
Sign-in and sign-up with validation block

Sign-in and sign-up pages that check each field when people leave it, explain every error in text next to its field, and show progress, failure and success pla…

npx shadcn@latest add https://tessli.vercel.app/r/auth-forms.json
Closing CTA and footer block

One final action tied to the page's job, then a compact footer with a few grouped links, a real contact route and the legal links.

npx shadcn@latest add https://tessli.vercel.app/r/closing-cta-footer.json
Dashboard overview block

Opens on the one question the dashboard exists to answer, gives the answer in a sentence, backs it with two or three compared metrics and a trend, and lists wh…

npx shadcn@latest add https://tessli.vercel.app/r/dashboard-overview.json
Data table with filters and states component

A compact, sortable table with labelled search and one filter, and designed loading, empty, no-results and error states that keep the layout still.

npx shadcn@latest add https://tessli.vercel.app/r/data-table.json
Empty state that says why and what next component

Replaces a list, table or feed that has nothing to show, and tells people why it is empty and the one thing to do next.

npx shadcn@latest add https://tessli.vercel.app/r/empty-state.json
FAQ that answers real objections block

Answers the questions buyers ask before committing, with direct answers and a real contact route, using native disclosure widgets.

npx shadcn@latest add https://tessli.vercel.app/r/faq.json
Feature section, evidence-led block

Shows each feature with the artefact that proves it (a UI fragment, a before/after, an exact limit), giving the most important feature the most room.

npx shadcn@latest add https://tessli.vercel.app/r/feature-evidence.json
Mobile list to detail block

A list of records that becomes one view at a time on phones, with large rows and a back button, and two panes side by side from 768px.

npx shadcn@latest add https://tessli.vercel.app/r/mobile-list-detail.json
Pricing tiers compared on the limits that matter block

Two or three plans compared on the few limits buyers actually weigh, with one recommended plan and an honest billing-period switch.

npx shadcn@latest add https://tessli.vercel.app/r/pricing-tiers.json
Product hero with real UI block

A landing-page hero that says what the product does, offers one primary action and shows the product itself, composed from interface components.

npx shadcn@latest add https://tessli.vercel.app/r/product-hero.json
Settings: account and danger zone block

An account settings page whose profile form validates per field and reports saves in place, with a separate danger zone that offers export before a typed, conf…

npx shadcn@latest add https://tessli.vercel.app/r/settings-account.json
Honest social proof block

Shows only proof a reader can check, real quotes with a name and a link to the source, and public records instead when there is none yet.

npx shadcn@latest add https://tessli.vercel.app/r/social-proof-honest.json
Tessli UI rules (TESSLI.md) file

A compact index of Tessli's 39 UI rules (drafts until a maintainer signs them), installed as TESSLI.md at the project root for coding agents to read.

npx shadcn@latest add https://tessli.vercel.app/r/rules.json