Components | tcpsystems/ui

Actions

Things people press.

Inputs

Native controls with labels, errors and validation built in.

Example coming

Field
Example coming

Input
Example coming

Textarea
Example coming

Select
Example coming

Choice
Example coming

SegmentedControl
Example coming

NumberInput
Example coming

PasswordInput
Example coming

PinInput
Deployment domain
https://

InputGroup
Project accent

ColorInput
Deployment replicas 3

Slider
Invoice amount 100 USD to 500 USD

Invoice amount low value Invoice amount high value

RangeSlider
How was this deployment?

Choose a score.

Rating
Invoice attachment Choose file No file chosen

FileInput
- invoice-november.pdf48,200 byte Done
FileList
Project documents Choose file No file chosen

Drop files here or choose a file

Dropzone
Deployment note Ready for production. 21 of 40

CharacterCount
Example coming

ErrorSummary

Data display

Numbers, tables, status and people.

Example coming

Table
Example coming

SortHeader
Example coming

Toolbar
Example coming

BulkBar
Example coming

Stat
Example coming

Meter
Example coming

Sparkline
Example coming

UptimeStrip
Example coming

Timeline
Service
Acumen
Region
Falkenstein
Revision
a83c21f

DescriptionList
Neutral Accent Ready Degraded Failed

Badge
Production Owner operated

Tag
Deployment healthy

Status
Brand accent #2563eb

Swatch
MC

Avatar
- MC
- LF
- PS
AvatarGroup
3 3 unread messages

Indicator

Feedback

What happened, what is happening, what to do next.

Example coming

Callout
Example coming

Banner
Example coming

Notice
Example coming

Toast
Example coming

Progress
Example coming

RingProgress
Example coming

RouteProgress
Example coming

Spinner
Example coming

Skeleton
Example coming

LoadingOverlay
Example coming

EmptyState
Example coming

Result
Example coming

SaveStatus

Where you are and where you can go.

Example coming

AppShell
Example coming

Topbar
Example coming

TopNav
Example coming

SideNav
Example coming

Brand
Example coming

Breadcrumbs
Example coming

Tabs
Example coming

Pagination
Example coming

DocPager
Example coming

Toc
Example coming

AnchorNav
Example coming

Tree
Example coming

Stepper
Example coming

OverflowList
Example coming

ScopeSwitcher
Example coming

RailToggle
Example coming

EnvironmentBand
Example coming

SkipLinks
ThemeSwitch
tcpsystems
Service status
Footer
Studio

Healthy

Splitter

Overlays

Dialogs, menus and palettes on native elements.

Example coming

Dialog
Example coming

Menu
Example coming

Tooltip
Example coming

CommandPalette
Example coming

SearchDialog

Surfaces

Blocks that hold a page together.

Example coming

Hero
Example coming

PageHeader
Example coming

Section
Example coming

Panel
Example coming

Tile
Example coming

Tiles
Example coming

Accordion
Example coming

Collapse
Example coming

Spoiler
Example coming

Preview

Layout

Spacing and structure without writing CSS.

Example coming

Stack
Example coming

Cluster
Example coming

Grid
Example coming

Split
Example coming

Container
Example coming

AspectRatio
Example coming

Divider
Example coming

ScrollArea
Example coming

Image

Typography and content

Words, code and icons.

Deployments

Heading
Review the latest build before deploying to production.

Text
- Review the build logs
- Confirm the health checks
- Deploy to production
List
Search gateway 2.4 is ready to deploy.

This release reduces query latency and adds health checks for every upstream.

Prose
sh
```
pnpm add @tcpsystems/ui
```
CodeBlock
Deployment complete

Icon