---
name: "@tessli"
slug: "tessli"
description: "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."
category: "Forms"
tags: ["auth", "blocks", "buttons", "cards", "dashboard", "design-system", "forms", "hooks", "marketing", "media", "mobile", "pro-available", "tables"]
framework: "react"
license: null
author: "Online-Scope-Lab"
website: "https://tessli.vercel.app/library"
github: "https://github.com/Online-Scope-Lab/tessli"
registry: "https://tessli.vercel.app/r/registry.json"
pro: true
pro_url: "https://tessli.vercel.app/library/pricing-tiers"
github_stars: 0
component_count: 13
generated_at: "2026-10-17T06:30:14.294Z"
---

# @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.

## Links

- Website: https://tessli.vercel.app/library
- GitHub: https://github.com/Online-Scope-Lab/tessli
- Registry JSON: https://tessli.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tessli
- This file: https://sh4dcn.vercel.app/md/tessli.md
- Pro / pricing: https://tessli.vercel.app/library/pricing-tiers

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://tessli.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://tessli.vercel.app/r/registry.json
bunx shadcn@latest add https://tessli.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/Online-Scope-Lab/tessli.git
# fetch the raw registry index
curl -s https://tessli.vercel.app/r/registry.json
```

## Components (13)

| name | type | description | install |
| --- | --- | --- | --- |
| auth-forms | registry: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-footer | registry: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 | registry: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 | registry: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 | registry: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 | registry: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-evidence | registry: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-detail | registry: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 | registry: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 | registry: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 | registry: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` |
| social-proof-honest | registry: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` |
| rules | registry: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` |

## For AI agents

```text
You are adding components from @tessli to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/tessli.md) for the component list.
2. Fetch the machine-readable index: https://tessli.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: tessli).
```