Components
Components are how modern interfaces are built in code. If you understand Figma components, variants and component properties, you already know the shape of most of this.
Not yet reviewedLevel
Terms
- BeginnerComponentA component is a reusable piece of interface with its own markup, style and behavior.Not yet reviewed
- BeginnerPropsProps are the inputs a component receives, such as label, size or disabled.Not yet reviewed
- BeginnerVariantsVariants are named versions of one component, such as primary, secondary and ghost buttons, chosen through a prop.Not yet reviewed
- BeginnerStateState is data inside a component that changes over time, like whether a menu is open or what has been typed in a field.Not yet reviewed
- BeginnerUI statesUI states are the conditions a component can be in: default, hover, focus, active, disabled, loading, error and empty.Not yet reviewed
- BeginnerEventsEvents are things that happen in the interface, like a click, a key press or a form submit.Not yet reviewed
- BeginnerJSXJSX is a syntax that lets you write HTML like markup inside JavaScript, used mainly by React.Not yet reviewed
- BeginnerReactReact is a JavaScript library for building interfaces from components.Not yet reviewed
- IntermediateHooksHooks are React functions, with names starting with use, that let a component hold state or run code at certain moments.Not yet reviewed
- IntermediateCompositionComposition means building larger components by combining smaller ones instead of adding more options to one big component.Not yet reviewed
- IntermediateChildren and slotsChildren, called slots in some systems, are content passed into a component so it can wrap whatever you give it.Not yet reviewed
- IntermediateHeadless componentsHeadless components supply behavior and accessibility, such as focus handling and keyboard support, without any styling.Not yet reviewed
- BeginnerFramework vs libraryA library is a set of tools you call when you need them.Not yet reviewed
Documentation
Quick Start
The official introduction to React, covering components, props, state and events with small interactive examples.
Introduction to shadcn/ui
A look at a popular approach to component libraries, where you own and edit the component code.
Know more about Components?
Suggest a term, a change, or a resource. No account needed.
Suggest a change