Skip to content

v0.0.2

Brand

Introduction

Colors
Typography
Spacing
Motion
Shadows

Button
Button Group
Icon Button

Input
Textarea
Number Input
Search Input
Password Input
Label
Helper Text
Form Field
Date Picker
Date Range Picker

Badge
Status Pill
Filter Chip
Chip
Tag
Eyebrow Chip

Avatar
Avatar Group

Alert
Banner
Callout
Toast
Spinner

Skeleton
Progress

Accordion
Collapsible
Scroll Area

Rating
Slider
Toggle
Toggle Group
Segmented Control

Select
Checkbox
Radio Group
Switch
Combobox
Autocomplete

Dialog
Alert Dialog
Popover
Tooltip
Hover Card
Drawer
Sheet

Tabs
Breadcrumb
Pagination

Table
Data Table
Empty State
Error State

Separator
Gradient Divider

Heading
Text

Code
Kbd
Link
Text Gradient

Card
Stack
Flex
Grid
Box

Fade
Slide
Scale
Collapse

StatCard
AuthCard
FilterBar
UserCard
PlanCard
ActivityFeed
SettingsSection
InfoList
StepIndicator
NotificationItem

Built with Nexub Design System · © 2026 · Nexub Pte. Ltd. Singapore.

Library

Components

Nexub DS ships with 73+ accessible, token-driven React components built on Radix UI primitives. Each component is fully typed and supports theming.

Actions

Triggers an action or event. Supports multiple variants, sizes, and semantic tones.

Groups related buttons together with optional attachment and orientation.

A square button designed to hold a single icon, with an accessible label.

Form & Input

Text input field for forms. Supports size variants, icons, addons, and validation states.

A multi-line text input with configurable resize behaviour, size, and validation states.

A numeric input with increment and decrement controls, supporting min/max clamping and step.

A text input pre-wired with a search icon and a clear button for filtering content.

A password field with a built-in toggle to reveal or hide the entered value.

An accessible form label that optionally shows a required asterisk and links to an input via htmlFor.

Small supporting text placed beneath a form field to provide hints or validation feedback.

Wraps Label, Input, HelperText and FormError into a single accessible group.

Calendar date picker with text input.

Date Range Picker

Dual-calendar date range selector.

Labels & Badges

Small status indicator or label. Communicates state, category, or count.

A pill indicator for status values like active, pending, error.

Interactive chip for filtering, supports selected/unselected state.

Compact label chip, optionally dismissible.

Non-interactive label tag for categorisation.

A compact eyebrow label, typically used above headings.

Avatar

Displays a user's profile picture with initials fallback.

Stacked group of avatars with overflow count.

Feedback

Inline contextual message with optional title, icon, and dismiss action.

Full-width announcement banner, typically used at the top of a page.

Highlighted content block for tips, warnings, or notes.

Imperative toast notifications using the toast object. Render <Toaster /> once in your layout.

Animated loading indicator. Inherits color from context.

Loading States

Placeholder loading animation that mimics content layout.

Horizontal progress bar with optional tone and animation.

Disclosure

Vertically stacked list of collapsible sections.

Toggle visibility of content with smooth animation.

Scrollable container with custom styled scrollbars.

Navigation

Layered content panels switched by tab triggers. Built on Radix UI Tabs.

Hierarchical navigation trail showing page location.

Page navigation control with prev/next and page number buttons.

Interactive

Star rating input, supports controlled and read-only modes.

Range slider built on Radix UI Slider.

Pressable toggle button built on Radix UI Toggle.

Group of toggle buttons where one or many can be active.

Segmented Control

Tab-style control for mutually exclusive selections.

Form Controls

Accessible dropdown select built on Radix UI. Supports groups and search.

Binary checkbox input built on Radix UI.

Group of mutually exclusive radio inputs.

Toggle control for binary on/off settings. Built on Radix UI Switch.

Command-palette style searchable dropdown built on cmdk.

Type-to-search input with matching options dropdown.

Overlays

Modal dialog built on Radix UI. Fully accessible with focus trapping and ARIA roles.

Confirmation dialog that requires an explicit user action before proceeding.

Floating content panel anchored to a trigger element.

Floating label that appears on hover. Built on Radix UI Tooltip.

Rich tooltip card revealed on hover.

Slide-in panel from any edge of the screen.

Alias for Drawer — slide-in sheet panel.

Data Display

Semantic HTML table with styled variants.

Feature-rich data table with sorting and row selection powered by TanStack Table.

Placeholder UI shown when a list or page has no content.

Full-page or section error view with retry action.

Layout

Surface container for grouping related content. Supports flat, surface, and interactive variants.

Vertical stack layout with configurable gap.

Flexbox layout primitive.

CSS Grid layout primitive.

Generic container primitive with style token props.

Dividers

A horizontal or vertical visual divider.

Gradient Divider

A decorative gradient-faded horizontal rule.

Typography

Semantic heading component with size, weight, and tone control.

Paragraph text component with size, tone, and weight variants.

Inline Primitives

Inline code span for technical terms and short code snippets.

Keyboard key display — renders a styled <kbd> element.

Styled anchor link with variant and external support.

Renders text with a brand gradient fill.

Motion

Animates opacity between 0 and 1 based on the `in` prop.

Slides content in from a direction based on the `in` prop.

Scales content in/out from its center.

Expands and collapses content along the block axis.