Components
Explore all 93 components available in the library.
Core
Form
Overlay
Completion Dialog
A dialog for displaying completion status with confetti animation.
Completion Dialog
Navigation
Data
Alert
Heads up!
You can add components using the CLI.
Error
Something went wrong. Please try again.
Alert
Content
Callout
Info
This is an informational callout.
Warning
This is a warning callout.
Tip
This is a helpful tip.
Danger
This is a danger callout.
Callout
Code Playground
Button Component
A simple React button
Button.tsx
function Button({ children }) {
return <button>{children}</button>
}typescript
Code Playground
Comparison
Code Quality
Before
- No type safety
- Hard to maintain
After
- Full TypeScript
- Easy to refactor
Comparison
FAQ
Common Questions
A collapsible FAQ component for displaying questions and answers.
Wrap FAQItem components inside the FAQ component.
FAQ
Learning
Key ConceptComponent
A reusable piece of UI that encapsulates structure and behavior.
Key Terms
- Props
Data passed from parent to child components.
- State
Data that changes over time within a component.
Key Concept
Learning Objectivesbeginner
What you'll learn
30 min
- Understand React components
- Learn about props and state
- Build your first component
Prerequisites
- •Basic JavaScript knowledge
- •HTML/CSS fundamentals
Summary
We covered the basics of React components.
Key Takeaways
- Components are reusable
- Props flow down
Learning Objectives
Pro Tip
Pro Tip
Use TypeScript for better developer experience.
Forgetting keys
Rendering lists without keys causes issues.
The Fix
Always add unique keys to list items.
Pro Tip
Step by Step
Getting Started
1
Install
Run npm install to install dependencies.
2
Configure
Set up your configuration files.
3
Build
Build your application for production.
Step by Step
Tutorial Card
Tutorial Card
Tutorial Intro Content
An introduction component for tutorials with objectives.
