49 Components Available

UI Component Design System

A comprehensive library of reusable React components built with Ant Design and Tailwind CSS. Explore interactive examples, copy code snippets, and build faster.

Explore ComponentsHow to UseQuick Links
26

Atoms

Basic building blocks

20

Molecules

Composite components

3

Organisms

Complex patterns

Popular Components

Jump directly to the most used components

B

Button

Atom
I

Input

Atom
M

Modal

Molecule
T

Table

Organism
F

Form

Organism
S

Select

Atom
T

Tabs

Molecule
C

Card

Molecule
View all 49 components

Common Design Guidelines

Universal principles that apply across all components

Consistency

  • Use the same variant for the same action across the app.
  • Stick to the design token colours — never use arbitrary hex values.
  • Spacing should follow the 4pt grid (4, 8, 12, 16, 24, 32…).
  • Icons from one family only — never mix icon sets.

Accessibility (a11y)

  • All interactive elements must be keyboard-navigable.
  • Colour contrast ≥ 4.5:1 for normal text, 3:1 for large text.
  • Never convey meaning through colour alone — add text or icons.
  • All images and icon buttons must have descriptive alt/aria-label.

Responsive Design

  • Design mobile-first — add complexity for larger screens.
  • Touch targets must be at least 44×44 px on mobile.
  • Prefer a single-column layout on small screens.
  • Test at 320 px, 768 px, and 1280 px breakpoints.

Feedback & State

  • Every user action must have visible feedback within 100 ms.
  • Show loading states for any async operation > 300 ms.
  • Empty states must explain why and offer a next action.
  • Error messages must be specific, not just "Something went wrong".

Content & Copy

  • Use sentence case for labels and headings — not Title Case or ALL CAPS.
  • Action labels should be verbs: "Save", "Delete", "Send" — not "OK".
  • Avoid jargon — write for a user who is using the feature for the first time.
  • Truncate long text with an ellipsis and provide a tooltip or "show more".

Performance

  • Lazy-load components and images that are below the fold.
  • Virtualise lists of more than ~50 items.
  • Debounce search inputs and resize handlers.
  • Avoid layout shift — always reserve space for async content.

Built with Next.js, Ant Design, and Tailwind CSS