Design

Design Principles

• A design system is a set of rules and opinions that shape the user interface and the experience as a whole.
• Design principles explain why we make specific decisions; implementation explains how they work in code.
• The Components system takes cues from the tools used to solve math and physics problems: paper, pencils, whiteboards, and pencil cases.
• Heavily inspired by Apple design videos.
• The core of digital services is to adapt to their cognitive load and enable their capabilities
• I care deeply about UX/UI design, with references including Apple , Linear , Raycast , Dub , and Vercel .
• Why is it called "Components"?
  • The name makes the purpose of this page clear in navigation.
  • Blue, black, gray, and white keep the visual language focused and familiar.
• Distinguish between link and button, link to navigate, button for action.
  • Both need clear hover, active, and focus-visible states when those states are relevant.
  • A link navigates; a button performs an action. Their visual treatment should reinforce that distinction.
• Prefer the system's basic colors and components to accelerate development while maintaining consistency.
• Components include responsive behavior and keyboard focus treatment where interaction requires it.
• The system is designed for both mobile and desktop web.
• View the component code here
• Explore other variations in the

  Radix UI

  or

  Headless UI

• Still evolving: typography, use cases, do's and don'ts, and component-specific guidance are next.

UI Components

SwitchSwitch.tsx

AccordionAccordion.tsx

What is an accordion?

CheckboxCheckbox.tsx

Accept terms and conditions.

PopoverPopover.tsx

Show Popover

Table

Example data table

Name	Role	Status
Ada	Engineer	Active
Grace	Designer	Away

TabsTabs.tsx

AccountPassword

Update your profile details and account preferences.

ToastToast.tsx

Show Toast

Button: PrimaryButton.tsx

Button

Button: LoadingButton.tsx

Button

Button: SecondaryButton.tsx

Button

Button: With IconButton.tsx

Bookmark

Button: Only IconButton.tsx

Button: DangerButton.tsx

Delete

Button: DisabledButton.tsx

Button

Internal LinkInternalLink.tsx

Internal Link

External LinkExternalLink.tsx

External Link

Input: Text

Text input

Input: Search

Search input

Input: Number

Number input

BoxBox.tsx

Title

Content

Text Area

ToggleToggle.tsx

State: off

Breadcrumbs

BadgesBadge.tsx

GeneralSuccessDangerAttentionInformation

Back ButtonBackButton.tsx

Previous Page

TooltipTooltip.tsx

Tooltip

Logo

Harits Syahharitssr.com

Haris Labharislab.com

Haris Studioharisstudio.com

ModalDialog.tsx

Open Modal

SelectSelect.tsx

design

Bottom Navigation MobileBottomBar.tsx

SliderSlider.tsx

Context MenusContextMenu.tsx

Right-click here

Right-click the panel

Date Picker

Choose a date

Main Colors

Hierarchical Colors

Figma Design