Components

Explore 62 production-ready React components with Claude-inspired visuals, practical defaults, and live examples for real product workflows.

General

Core primitives for actions, layout flow, and readable text.
Button
Trigger actions with consistent interactive states and visual hierarchy.
Flex
Arrange content in responsive horizontal and vertical flex layouts.
Item 1
Item 2
Item 3
Typography
Create consistent text hierarchy for headings, body, and meta copy.

Heading

Body text with the serif font stack.
Secondary text

Data Entry

Inputs and controls for collecting user selections and typed data.
AutoComplete
Suggest options while users type to speed up input completion.
Search...
Checkbox
Allow selecting one or many independent options in a form.
ColorPicker
Select and preview colors for theming, branding, or configuration.
DatePicker
Pick dates quickly using keyboard-friendly and calendar-based controls.
Form
Build validated forms with grouped fields and submission flows.
Input
Capture text and search values with ergonomic input states.
InputNumber
Collect numeric values with bounds and step control support.
Mentions
Insert @mentions and referenced entities inside rich text input.
OTP
Capture one-time passcodes with segmented and keyboard-first UX.
Radio
Choose exactly one option from a predefined set.
Rate
Capture satisfaction or quality input through star rating controls.
Segmented
Switch between closely related views using compact segmented controls.
Select
Choose options from searchable or static dropdown lists.
React
Slider
Adjust values across a range with drag and keyboard control.
Switch
Toggle binary settings with immediate visual feedback.
Enabled
TimePicker
Capture time values precisely with structured clock inputs.
Upload
Handle file selection and upload actions with status feedback.

Data Display

Presentation components for content, media, structure, and summaries.
Avatar
Represent people, teams, or entities with images, initials, or groups.
AB
CD
Badge
Highlight counts, notification states, or quick status indicators.
U5N
Card
Group related information in a contained, scannable content panel.
Card Title
Card content with warm aesthetic.
Collapse
Hide and reveal sections of content to reduce visual noise.
Descriptions
Display labeled metadata pairs in a clean, structured layout.
Name@luicn/roman
Version0.1.0
LicenseMIT
Components62
Empty
Provide meaningful empty-state messaging when no data is available.
No data
No data yet
Image
Display images with fallback behavior and loading-safe rendering.
List
Render ordered or unordered content rows with consistent spacing.
  • Button
  • Input
  • Select
Popover
Reveal contextual details adjacent to controls without navigation.
Statistic
Emphasize key metrics with focused number-forward presentation.
Components
62
Downloads
1,128
Table
Render tabular datasets with readable structure and sorting affordances.
ComponentCategory
ButtonGeneral
InputData Entry
TableData Display
Tabs
Switch between related sections without leaving the current page.
Content of tab 1
Tag
Categorize entities with compact labeled pills and optional status.
romandefaultborderless
Timeline
Display events in chronological order with clear sequencing.
  1. Create project
  2. Install dependencies
  3. Build components
Tooltip
Provide short contextual hints on hover or focus.
Tour
Walk users through product features with guided spotlight steps.
Tour provides step-by-step guides for UI elements.

Feedback

Status, progress, confirmation, and loading states for user workflows.
Alert
Communicate contextual status messages for success, warning, error, or info.
Dialog
Display focused interactive overlays for short critical tasks.
Dialog provides accessible modal dialogs.
Drawer
Open contextual side panels without leaving the current view.
Popconfirm
Confirm destructive or sensitive actions with lightweight prompts.
Progress
Communicate task progress with determinate or indeterminate visuals.
75%
60%
Result
Summarize outcomes after operations, onboarding, or completion states.
Done
Operation completed.
Skeleton
Reserve layout shape while asynchronous content is loading.

Spin
Indicate ongoing background operations with lightweight loading indicators.

Layout

Spacing and structural helpers to organize page composition cleanly.
Divider
Separate blocks of content with subtle visual structure lines.
AboveBelow
Label
Annotate sections and controls with compact semantic text tags.
Space
Apply consistent spacing between inline or block elements.

AI

Conversation-first interface blocks tailored for assistants and agents.
Attachments
Show and manage files attached to chat prompts and responses.
Attachments provides file attachment UI for chat interfaces.
Bubble
Render conversational message bubbles optimized for AI chat interfaces.
Hello! How can I help?
Tell me about Roman.
Conversations
Compose conversation threads with AI and human participants.
  • Design system chat
  • Component review
Prompts
Offer quick prompt chips to accelerate conversational interactions.
What is Roman?
Show me components
How to theme?
Sender
Provide chat-style message input with submit-first ergonomics.
Suggestion
Display smart inline recommendations to assist next actions.
Suggestion provides inline suggestion chips for AI interfaces.
ThoughtChain
Visualize AI reasoning progress across multi-step workflows.
Analyzing request
Generating response
Welcome
Introduce users with starter prompts for conversational interfaces.

Welcome

How can I help you today?