TT-UI

Compose full UI sections from reusable blocks.

Blocks are higher-level compositions built from your components. Start with ready-to-use implementations for auth, marketing, chat, and product UI.

Landing page
Marketing
Communication
Auth
UI
Devtools

Trusted by teams worldwide

ReactNext.jsTSTailwindFigma

Starter

$0

  • 3 projects
  • Community

Pro

Popular

$29

  • Unlimited
  • Priority

Chat UI

Communication
AI

Assistant

Block install help

Add a pricing block?

Install it from the blocks registry.

AuthSign-in block

Sign in

Welcome back - sign in to continue

Auth
Auth
Authentication block with sign in and sign up forms.
View details and install
Sign in
Welcome back - sign in to continue

No account?

Auth
Oauth
OAuth block with sign in and sign up forms.
View details and install
Sign in
Welcome back - use email or continue with a provider
or continue with

No account?

Communication
Chat UI 01
A full conversational interface block with chat container, bubbles, input, typing indicator, and reactions.
View details and install

Chat UI Kit

A comprehensive, accessible, and customizable chat component library

AI

AI Assistant

Always here to help

AA

Hello! How can I help you today?

12:17 AM
Y

I need help understanding React hooks. Can you explain useState and useEffect?

12:18 AM
AA

Of course! Let me explain both hooks:

useState

useState is used to add state to functional components:

tsx
const [count, setCount] = useState(0);

useEffect

useEffect handles side effects in your components:

tsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

Would you like more examples?

12:19 AM
Y

That's really helpful, thank you! Can you show me a real-world example combining both?

12:20 AM
Communication
Streaming Composer
AI-style response panel with text or structured markdown streaming, skeleton placeholders, and pause/resume controls.
View details and install

Streaming Composer

AI-style response panel with text or structured markdown streaming, skeleton placeholders, and pause/resume controls.

Mode:
Variant:
Streaming...

Devtools
API Route Explorer 01
Embeddable API console block: grouped endpoints, request builder with editable query and headers, live execution, JSON highlighting, and fetch / axios / curl snippets.
View details and install
Pro

API Route Explorer

An embeddable, modular API console for docs, dashboards, and internal tools.

Communication
Conversation Branch
Branching conversation UI with thread navigation, sibling switching, confidence indicators, and an optional minimap.
View details and install
Pro

Conversation Branch

Branching thread UI for multi-path AI conversations with minimap navigation and confidence metrics.

Conversation Branch

Alternate response visualization

9
Messages
2
Alt. branches
88%
Avg confidence
6
Active depth
User
Explain how neural networks learn. Focus on the backpropagation algorithm.
claude-sonnet
91% conf
High-level backprop overview
Neural networks learn through a process called backpropagation. At its core, the network makes a prediction, calculates how wrong it was (the loss), and then adjusts every weight in reverse - from output back to input - to reduce that error.
User
What about vanishing gradients? How does that affect training deep networks?
2 alternates
claude-sonnet
94% conf
Causes + modern solutions
Vanishing gradients happen because we multiply many small numbers together. In deep networks using sigmoid activations, gradients shrink exponentially as they propagate backwards.
User
Can you give me a concrete PyTorch example of a training loop?
Branch pillswitch alternate response
Messageexpand / collapse
Branch mapjump to any node
Marketing
Pricing Section 01
Conversion-focused pricing section with monthly/yearly billing toggle, animated price transitions, and responsive 1–5 plan layouts.
View details and install

Pricing Section

A conversion-focused pricing block with billing toggle, animated prices, and flexible plan layouts.

Switch to yearly and save up to 20%

Free
For personal projects and early exploration.
$0/month
  • Up to 3 projects
  • Community support
  • Basic analytics
Most Popular
Pro
For professionals shipping production apps.
$29/month
  • Unlimited projects
  • Priority email support
  • Advanced analytics
  • Team collaboration
  • API access
Enterprise
For organizations with advanced security needs.
$99/month
  • Everything in Pro
  • SSO & SAML
  • Dedicated support
  • Custom SLAs
  • Audit logs
Marketing
FAQ Section 01
Marketing FAQ section with scroll-revealed header and accordion question / answer list.
View details and install

FAQ Section

Section title plus accordion FAQ list with scroll-triggered reveal on the header.

Frequently asked questions

Everything you need to know about plans, security, and support.

Yes. Upgrade or downgrade from your account settings. Changes apply on your next billing cycle, and we prorate upgrades immediately.

Marketing
Experience Timeline 01
Scroll-synced work history section with progress rail section markers for portfolio and resume pages.
View details and install

Portfolio block

Experience Timeline

A scroll-synced work history section with progress rail markers - ready to drop into portfolio and resume pages.

Experience

Selected roles where I led frontend architecture, shipped customer-facing product, and built design systems.

NL

Northwind Labs

Vibe Assisted Engineer

Remote

Man, I couldn't even tell you what I'm doing at this place, they just pay me to speak to an AI all day?

  • Prompted an AI to build the dashboard, it worked on my machine.
  • Increased bundle size by 32% after adding a new feature, agent promised it would be small.
  • Promised a new feature by Friday, that was last year.
ReactTypeScriptMotionDesign Systems
AC

Acme Commerce

Senior Frontend Engineer

San Francisco, CA

The good ol' days, when I was a real engineer.

  • Rebuilt cart checkout with optimistic UI, reducing abandonment by 12%.
  • Introduced feature flags and staged rollouts for payment experiments.
  • Partnered with design on responsive patterns reused across mobile web.
Next.jsGraphQLStripeA/B Testing
BS

Brightside Studio

Junior Frontend Engineer

Austin, TX

Shipped marketing sites and interactive product demos for agency clients in fintech and SaaS.

  • Delivered 20+ launch pages with scroll-driven storytelling and WebGL accents.
  • Standardized animation tokens and improved design-to-engineering handoff.
VueGSAPWebGLCSS
MC

McDonald's

McDonald's Employee

Behind the counter

Worked as a McDonald's Employee, I was a real engineer.

  • Worked as a McDonald's Employee, I was a real engineer.
Spitting in burgersMaking friesPaid for toilet breaks
Marketing
Logo Cloud 01
Trusted-by heading with infinite scrolling marquee or static logo row for social proof.
View details and install

Logo Cloud

Trusted-by heading with a scrolling marquee or static logo row.

Trusted by product teams

From early-stage startups to established SaaS companies.

React
Next.js
TypeScript
Tailwind CSS
Node.js
Figma
React
Next.js
TypeScript
Tailwind CSS
Node.js
Figma
React
Next.js
TypeScript
Tailwind CSS
Node.js
Figma
React
Next.js
TypeScript
Tailwind CSS
Node.js
Figma
UI
Consent Cookie Bar 01
Cookie and consent entry with regions, categories, and accept or reject non-essential actions.
View details and install

Consent Cookie Bar

Cookie and consent entry with regions, categories, and accept or reject non-essential actions.

Cookie preferences

We use cookies to run the site and improve your experience. Choose which categories you allow. Privacy Policy

Required for sign-in, security, and core site functionality.

Helps us understand usage and improve the product.

Personalized content and campaign measurement.

UI
List Item 01
Generic list row with avatar, primary and secondary text, row click, and trailing action menu - for feeds, sidebars, and custom lists.
View details and install

List Item

Generic list row with avatar, primary and secondary text, optional row click, and trailing action menu. Compose into any card or sidebar - use member-list-panel for full team rosters.

Recent activity
Notification-style rows you can drop into sidebars, drawers, or inbox panels.
Marketing
Testimonial Row 01
Dual-row infinite card marquee of testimonials with quote, name, role, and optional avatar.
View details and install

Testimonial Row

Dual-row infinite card marquee of quote cards with name, role, and optional avatar.

Loved by product teams

See what builders say about shipping faster with registry blocks.

“We shipped our admin dashboard in half the time. The blocks drop in cleanly and match our design system out of the box.”
AC

Ada Chen

Engineering Lead, Northwind

“The data toolbar and table patterns saved us weeks of polish. Our team spends time on product logic, not layout details.”
MW

Marcus Webb

Product Designer, Lumen

“Reliable, accessible components with sensible defaults. Exactly what we needed for a fast-moving SaaS launch.”
SR

Sofia Rivera

Founder, Stackline

“The dual-row marquee layout feels polished on our landing page without any custom animation work.”
EP

Elena Park

Marketing Director, Orbit

“Copy-paste blocks that actually compose well together - rare for a component library at this quality level.”
JO

James Okonkwo

CTO, Relay

“We shipped our admin dashboard in half the time. The blocks drop in cleanly and match our design system out of the box.”
AC

Ada Chen

Engineering Lead, Northwind

“The data toolbar and table patterns saved us weeks of polish. Our team spends time on product logic, not layout details.”
MW

Marcus Webb

Product Designer, Lumen

“Reliable, accessible components with sensible defaults. Exactly what we needed for a fast-moving SaaS launch.”
SR

Sofia Rivera

Founder, Stackline

“The dual-row marquee layout feels polished on our landing page without any custom animation work.”
EP

Elena Park

Marketing Director, Orbit

“Copy-paste blocks that actually compose well together - rare for a component library at this quality level.”
JO

James Okonkwo

CTO, Relay

“The data toolbar and table patterns saved us weeks of polish. Our team spends time on product logic, not layout details.”
MW

Marcus Webb

Product Designer, Lumen

“Reliable, accessible components with sensible defaults. Exactly what we needed for a fast-moving SaaS launch.”
SR

Sofia Rivera

Founder, Stackline

“The dual-row marquee layout feels polished on our landing page without any custom animation work.”
EP

Elena Park

Marketing Director, Orbit

“Copy-paste blocks that actually compose well together - rare for a component library at this quality level.”
JO

James Okonkwo

CTO, Relay

“We shipped our admin dashboard in half the time. The blocks drop in cleanly and match our design system out of the box.”
AC

Ada Chen

Engineering Lead, Northwind

“The data toolbar and table patterns saved us weeks of polish. Our team spends time on product logic, not layout details.”
MW

Marcus Webb

Product Designer, Lumen

“Reliable, accessible components with sensible defaults. Exactly what we needed for a fast-moving SaaS launch.”
SR

Sofia Rivera

Founder, Stackline

“The dual-row marquee layout feels polished on our landing page without any custom animation work.”
EP

Elena Park

Marketing Director, Orbit

“Copy-paste blocks that actually compose well together - rare for a component library at this quality level.”
JO

James Okonkwo

CTO, Relay

“We shipped our admin dashboard in half the time. The blocks drop in cleanly and match our design system out of the box.”
AC

Ada Chen

Engineering Lead, Northwind

Devtools
Git Timeline
Commit and release timeline with branches, tags, authors, CI status, and collapsible diff snippets.
View details and install

Git Timeline

Commit and release timeline with branches, tags, authors, and collapsible diff snippets.

Repository activity

Recent commits, merges, and releases on main.

  1. a3f9c2dmainSuccess

    Alex Chen

  2. b7e1a04feat/webhook-retrySuccess

    Jordan Rivera

    +const MAX_RETRIES = 5;
    +const BASE_DELAY_MS = 1000;
    

     export async function deliverWebhook(payload: Payload) {
    -  await fetch(payload.url, { method: "POST" });
    +  return retryWithBackoff(() => post(payload), MAX_RETRIES, BASE_DELAY_MS);
     }
  3. v2.4.1Success

    Morgan Shaw

  4. c4d8f91fix/sync-raceWarning

    Taylor Park

    @@ -42,6 +42,8 @@ async function syncSubscription(id: string) {
       const lock = await acquireLock(id);
    +  if (!lock) return;
       try {
         await pullRemoteState(id);
       } finally {
         await releaseLock(id);
       }
  5. v2.4.0

    Riley Kim

  6. d9a2b17mainDeploying

    Alex Chen

UI
Member List Panel
Team roster panel with avatar group summary, search, role badges, and row action menus.
View details and install

Member List Panel

Team roster with avatar group summary, search, role badges, and row actions.

Team members

Manage workspace access and roles.

ACJRMSTP
+4

8 members

  • Alex Chen

    OwnerOnline

    alex@acme.dev

  • Jordan Rivera

    AdminOnline

    jordan@acme.dev

  • Morgan Shaw

    Editor

    morgan@acme.dev

  • Taylor Park

    Viewer

    taylor@acme.dev

  • Riley Kim

    Viewer

    riley@acme.dev

  • Casey Nguyen

    Editor

    casey@acme.dev

  • Sam Ortiz

    Viewer

    sam@acme.dev

  • Jamie Lee

    Viewer

    jamie@acme.dev