Brand components
Tech line
middle-dot separated stack line in Barlow.
Preview
- Java
- Spring Boot
- PostgreSQL
Install
bash
npx shadcn add @eloquent/tech-lineUsage
tsx
import { TechLine } from "@/components/ui/tech-line";
<TechLine aria-label="Stack" items={["Java", "Spring Boot", "PostgreSQL"]} />States
- TypeScript
- React 19
- Next.js 16
- Tailwind CSS v4
- Base UI
- Vitest
- Playwright
- Kotlin
- Ktor
- Redis
| State | Treatment |
|---|---|
| Default | Barlow 500 14px ink, halftone middle dots |
| Wrapping | Each dot travels with the item after it |
separator | Any glyph; always aria-hidden |
Keyboard
This component is not interactive. It is not a tab stop, so Tab skips it.
| Key | Action |
|---|---|
| Tab | Skips it; not a tab stop |
Vietnamese
- Java
- Spring Boot
- PostgreSQL
Ink adaptation
Brand item with no upstream. Stack lists are text with middle dots, never pills or badges.