TDACorp's design system

TDACorp's Signal UI Library

TDACorp's Signal UI library - prebuilt, Signal-themed components for TDACorp's own products. Internal use only.

This is not a generic component library. It's TDACorp's own design system, built for TDACorp's own products.

Most component libraries make you install a package and wrap or override it when it doesn't quite fit. Signal works differently: the actual component code is handed to you when you install it, styled to Signal's defaults from the start. Four principles - Open Code (edit the component directly, no wrapping), Composition (every component shares a common, predictable interface), Distribution (a flat-file schema and a CLI install components across every TDACorp project), and Beautiful Defaults (styled to match Signal out of the box, easy to override where a product needs to).

Install

Get the CLI

Add components to any TDACorp Next.js project.

npx @tdacorp/signal@latest add button

init: Initialize configuration and dependencies for a new or existing project.
add: Add components and their dependencies to your project.
apply: Apply a preset to an existing project.
eject: Inline the shared tailwind.css and remove the Signal dependency.

Theming

Every component reads semantic CSS tokens - override them in your CSS to change the look without rewriting component classes.

background / foreground: The default app background and text color.
card / card-foreground: Elevated surfaces and the content inside them.
popover / popover-foreground: Floating surfaces - Popover, DropdownMenu, ContextMenu.
primary / primary-foreground: High-emphasis actions and brand surfaces.
secondary / secondary-foreground: Lower-emphasis filled actions and supporting surfaces.
muted / muted-foreground: Subtle surfaces and lower-emphasis content.
accent / accent-foreground: Interactive hover, focus, and active surfaces.
destructive: Destructive actions and error emphasis.
border / input / ring: Borders, form control surfaces, and focus rings.
chart-1 ... chart-5: The default chart palette.
sidebar / sidebar-*: The sidebar surface, its accents, borders, and focus rings.
radius: The base corner radius - radius-sm through radius-4xl scale from it.

72 components

Components

Every component Signal ships, live and Signal-themed. Hover a tile to copy its install command.

Forms & Inputs

input

A text input component for forms and user data entry with built-in styling and accessibility features.

12 results

input-group

Add addons, buttons, and helper content to inputs.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

input-otp

Accessible one-time password component with copy-paste functionality.

textarea

Displays a form textarea or a component that looks like a textarea.

native-select

A styled native HTML select element with consistent design system integration.

select

Displays a list of options for the user to pick from - triggered by a button.

combobox

Autocomplete input with a list of suggestions.

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

Enable notifications

You can enable or disable notifications at any time.

checkbox

A control that allows the user to toggle between checked and not checked.

Default

Comfortable

Compact

radio-group

A set of checkable buttons - known as radio buttons - where no more than one of the buttons can be checked at a time.

Airplane Mode

switch

A control that allows the user to toggle between checked and not checked.

slider

An input where the user selects a value from within a given range.

September 2026

calendar

A calendar component that allows users to select a date or a range of dates.

date-picker

A date picker component with range and presets.

Accept terms and conditions

label

Renders an accessible label associated with controls.

field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

form

Building forms with react-hook-form and zod.

button

Displays a button or a component that looks like a button.

button-group

A container that groups related buttons together with consistent styling.

toggle

A two-state button that can be either on or off.

toggle-group

A set of two-state buttons that can be toggled on or off.

Overlays

dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

alert-dialog

A modal dialog that interrupts the user with important content and expects a response.

sheet

Extends the Dialog component to display content that complements the main content of the screen.

drawer

A drawer component for React.

command

Command menu for search and quick actions.

Navigation

menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

pagination

Pagination with page navigation, next and previous links.

Overview

View your key metrics and recent project activity. Track progress across all your active projects.

You have 12 active projects and 3 pending tasks.

tabs

A set of layered sections of content - known as tab panels - that are displayed one at a time.

Data Display

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

table

A responsive table component.

Status		Amount
success	ken99@example.com	$316.00
success	Abe45@example.com	$242.00
processing	Monserrat44@example.com	$837.00
success	Silas22@example.com	$874.00
failed	carmella@example.com	$721.00

0 of 5 row(s) selected.

data-table

Powerful table and datagrids built using TanStack Table.

Enter your email below to login to your account

card

Displays a card with header, content, and footer.

CNER

CNLRER

avatar

An image element with a fallback for representing the user.

BadgeSecondaryDestructiveOutline

badge

Displays a badge or a component that looks like a badge.

⌘⇧⌥⌃Ctrl+B

kbd

Used to display textual user input from keyboard.

Basic Item

A simple item with title and description.

Your profile has been verified.

item

A versatile component for displaying content with media, title, description, and actions.

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

Learn More

empty

Use the Empty component to display an empty state.

Bar Chart - Interactive

Showing total visitors for the last 3 months

chart

Beautiful charts. Built using Recharts. Copy and paste into your apps.

Taxing Laughter: The Joke Tax Chronicles

Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.

The King's Plan

The king thought long and hard, and finally came up with a brilliant plan: he would tax the jokes in the kingdom.

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

The Joke Tax

The king's subjects were not amused. They grumbled and complained, but the king was firm:

1st level of puns: 5 gold coins
2nd level of jokes: 10 gold coins
3rd level of one-liners : 20 gold coins

As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.

Jokester's Revolt

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.

And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

The People's Rebellion

The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.

King's Treasury	People's happiness
Empty	Overflowing
Modest	Satisfied
Full	Ecstatic

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.

The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.

typography

Styles for headings, paragraphs, lists, etc.

carousel

A carousel with motion and swipe built using Embla.

	Starter For a single project$19/mo	TeamRecommended For a growing team$49/mo	Enterprise For larger organizationsCustom
Projects	1	10	Unlimited
Team members	1	10	Unlimited
Custom domains
SSO
Priority support

pricing-table

A plan comparison table for pricing pages.

Backend/ 01

A queueing layer for a payments pipeline

Replaced a single point of failure with a durable queue, so a downstream outage never drops a customer's payment.

TypeScriptPostgresRedis

Read the writeup →

What it demanded

Every job retried, never silently dropped
Exactly-once delivery for a charge, at-least-once for everything else
A dashboard the on-call engineer can actually trust

case-study-card

A rich card for portfolio and case-study entries, with tags and a requirements list.

Feedback

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We've added dark mode support. You can enable it in your account settings.

alert

Displays a callout for user attention.

progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

skeleton

Use to show a placeholder while content is loading.

Processing payment...

$100.00

spinner

An indicator that can be used to show a loading state.

sonner

An opinionated toast component for React.

What often gets missed here

The failure case people plan for is the server going down. The one that actually happens is the server staying up while the queue quietly stops draining.

callout

An editorial aside box with a left-rule accent, for notes and caveats inside prose.

Layout

Signal

The Foundation for your Design System

A set of beautifully designed components that you can customize, extend, and build on.

separator

Visually or semantically separates content.

aspect-ratio

Displays content within a desired ratio.

scroll-area

Augments native scroll functionality for custom, cross-browser styling.

One

Two

Three

resizable

Accessible resizable panel groups and layouts with keyboard support.

Order #4189

StatusShipped

collapsible

An interactive component which expands/collapses a panel.

We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.

accordion

A vertically stacked set of interactive headings that each reveal a section of content.

No visual preview - this is a provider component.

direction

A provider component that sets the text direction for your application.

Next step

Start with the actual problem.

A call costs a problem with taking shape. A brief costs one where the scope and constraints are already settled.

cta-band

A full-bleed, inverted call-to-action band closing a page.

01
Discovery
Scope the problem and the constraints.
02
Design
Sketch the shape before writing code.
03
Build
Ship in small, reviewable increments.
04
Test
Verify against the real requirements.
05
Launch
Hand over, with the reasoning included.

steps

A numbered horizontal sequence for a process or workflow.

Getting started

What this is, and how to try it.

Pricing

How engagements are scoped and billed.

faq-section

A two-column FAQ section with a category-nav grid and accordion lists.