lucide-animated.com No paid content found

A React component is a reusable piece of UI defined as a JavaScript function (or, historically, a class) that returns markup. You build an interface by composing many small components, passing data in through props and tracking change with state. If you're starting a project or adding to one, you'll usually write your own components for app-specific logic and pull in prebuilt ones from a library or registry for common UI like buttons, heroes, and cards. The sections below cover how components work, when to use which style, and how to add one and confirm it renders.

The core idea: a function that returns UI

A component takes an input object called props and returns what should appear on screen. State is data a component owns and can change over time; when it changes, React re-renders that component.

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

// Used like an HTML tag:
<Greeting name="Ada" />

Two rules matter in practice:

• Props flow down, events flow up. A parent passes data to a child via props; the child signals change by calling a function the parent handed it.
• Components must be pure with respect to their inputs. Given the same props and state, they should render the same output. Side effects (fetching, subscriptions) belong in hooks like useEffect.

Function components vs. class components

Modern React uses function components with hooks. Class components still appear in older codebases and some libraries, so you should recognize them even if you don't write them.

If you're starting fresh, use function components. Reach for a class only when maintaining existing code or integrating a library that requires it.

Composition: build big UI from small pieces

The main way you scale a React app is by splitting UI into small components and combining them. Three patterns cover most cases:

• Passing children lets a wrapper render whatever you nest inside it:

  function Card({ children }) {
    return <div className="card">{children}</div>;
  }
  <Card><Greeting name="Ada" /></Card>
  

• Lifting state up means moving shared state to the closest common parent so two siblings can stay in sync, rather than duplicating it in each.
• Keeping components focused — one component, one job — makes them easier to reuse and test.

Where prebuilt components come from

You rarely build everything yourself. Two distribution models dominate:

• Package libraries ship compiled code you import from node_modules. You get updates by bumping a version, but you don't own or edit the source.
• Registries and copy-in source give you the actual component file, which lands in your repo and becomes yours to edit. This is the model behind shadcn/ui conventions, where components are React + Tailwind source rather than an opaque dependency.

21st is a registry in the second category. Its library lists 12,000+ crafted React components, templates, and shadcn themes, organized into categories such as 2,000+ marketing blocks (animated heroes, shaders, backgrounds, footers) and 2,100+ UI components (buttons, AI chats, cards and grids, navigation, sign-ins). Components are attributed to named authors, and the site states they ship as prompts you can copy into your tooling — its examples show the same prompt producing a diff in Codex, a file in Claude Code, and a live preview in Lovable. The site also reports 25,431 installs in a week for one component and a builder count of 3,819,076, which gives a rough sense of activity rather than a quality guarantee.

Because these components are source you place in your project, the trade-off is the reverse of a package library: you can edit anything, but you also own maintenance and updates.

Adding a component to your project and verifying it

The exact command depends on the registry, but the shape of the task is consistent. Using a copy-in component as the example:

1. Confirm prerequisites. You need a React project with Tailwind and the cn utility (a class-merging helper) available, since registry components typically import from @/lib/utils.
2. Get the source. Either run the registry's install command or paste the component's prompt into your AI tool so it writes the file into your components directory. Expect a new file such as components/ui/shimmer-button.tsx.
3. Import and render it. Add the import to a page and place the component in the tree.
4. Verify. Run your dev server and check that the component appears and responds to interaction. If the registry ships a preview, compare against it.

A minimal check after install:

import { ShimmerButton } from "@/components/ui/shimmer-button";

export default function Page() {
  return <ShimmerButton>Get started →</ShimmerButton>;
}

If it renders and the hover/interaction behavior matches the preview, the install succeeded.

Troubleshooting common problems

• Missing imports or unresolved @/ paths. The @ alias must be configured in your bundler or tsconfig. If the component imports @/lib/utils and that file doesn't exist, create it or fix the alias.
• Prop type errors. If the component expects a required prop and you omit it, you'll get a warning or a crash. Check the component's signature and pass what it declares.
• Styling looks wrong. Registry components assume Tailwind is set up and that your theme tokens (colors, radii) exist. Missing Tailwind config or theme variables produce unstyled output rather than an error.
• Excessive re-renders. A component re-rendering on every keystroke or parent update usually means state lives too high or a new object/function is created each render. Move state closer to where it's used, or memoize with useMemo/useCallback when profiling shows it matters.
• "Hooks can only be called inside a component." You called a hook at the top level of a module or inside a condition. Hooks must run unconditionally at the top of a component or custom hook.

Choosing between writing and installing

Write your own component when the logic is specific to your app, when you need tight control over behavior, or when a library's abstraction would fight your design. Install from a registry when the UI is generic (buttons, heroes, cards), when you want to read and edit the source, and when you're comfortable owning updates. Use a package library instead when you'd rather receive fixes automatically and don't need to modify internals. The right choice depends on how much control versus maintenance you want — not on which option is universally better.

Free icons are icon files you can download and use at no cost, but "free" describes the price, not the permissions. Before using any set, check its license (MIT, CC0, or attribution-required), confirm the format (SVG, font, or PNG), and match the style to your interface. Slim Icons is one example: a free and open source library of 200 icons in a slim outline style, with adjustable stroke width and color, plus a GitHub link and a contribution/request workflow.

What "free" actually means for icons

The word free hides three separate questions. Answer all three before you ship anything.

• Price: Can you download and use it without paying?
• License: What does the license let you do — commercial use, modification, redistribution?
• Attribution: Must you credit the creator, and where?

A set can be free to download but still require attribution, or restrict commercial use. Treat the license file, not the download button, as the source of truth.

For Slim Icons specifically, the page describes it as "free & open source" and links to GitHub, which is where you should confirm the exact license terms before commercial use.

Matching icon style to your interface

Style is not decoration — it changes how legible and consistent your UI feels. The main families:

• Outline (stroke-based): Light, modern, works well for navigation, toolbars, and dense interfaces. Slim Icons fits here — its stated style is "slimmer than you."
• Filled (solid): Higher visual weight, good for active states, small sizes, and emphasis.
• Minimal: Fewer details, scales down cleanly, reduces visual noise.
• Duotone: Two tones for hierarchy; heavier and more decorative.

A practical rule: pick one family and one stroke weight, then apply it everywhere. Mixing outline and filled icons in the same toolbar usually looks accidental unless the difference signals state (for example, outline = inactive, filled = active).

Practical details to check before committing

Icon count and format decide whether a set can carry a whole product.

• Count: Slim Icons ships 200 icons. That covers common interface actions, but a large product with niche needs may outgrow it — check coverage against your actual screens first.
• Format: SVG is the default choice for web and app UI because it scales without blur and can be styled with CSS. Font icons are convenient but harder to control per-icon; PNG is fixed-resolution and best avoided for UI.
• Customization: Slim Icons exposes stroke width (default 1.5 px) and color controls, plus a reset. Adjustable stroke width matters because a 1.5 px stroke that looks right at 24 px may look too thin at 16 px.

How to download and use icons in a project

The workflow below applies to most free SVG icon sets, including Slim Icons.

1. Open the library and browse or search for the icon you need.
2. Set stroke width and color using the on-page controls (Slim Icons defaults to 1.5 px). Match these to your design tokens so icons don't drift from your type and border weights.
3. Download the icon as SVG. Slim Icons also offers a "Download all" option if you want the full set.
4. Add it to your project. For web, either inline the SVG or reference it as an <img>/background. Inline SVG lets you control stroke and stroke-width via CSS:

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
  <path d="..." />
</svg>

5. Verify the result. Check the icon at your smallest and largest real sizes, confirm it aligns with adjacent text, and make sure color inherits correctly (using currentColor means the icon follows your text color automatically).
6. Record the license and attribution in your project's credits or license file if required.

Common snags: stroke width that looks correct in the preview but too heavy after scaling; icons that don't align to your grid because their viewBox differs; and forgetting that "Download all" may include icons you'll never use, bloating your bundle.

Contributing and requesting icons

If a set is open source, you can often shape it. Slim Icons provides a "How to contribute" link, a "Request icons" option, and a GitHub repository. Use these when:

• You need an icon the library doesn't have — request it rather than drawing an inconsistent one.
• You want to fix or improve an existing icon — contribute via GitHub.
• You're evaluating long-term viability — an active repo and request process suggest the set will keep growing.

Before relying on a small library for a long project, weigh its current count (200 for Slim Icons) and its contribution activity against your roadmap.

Choosing between free icon sets

Compare candidates on the same dimensions, then decide based on your constraints:

If you need a lightweight, consistent outline set for a web or product UI and 200 icons covers your needs, Slim Icons is a reasonable fit — just confirm its license on GitHub first. If you need thousands of icons or multiple styles in one system, look for a larger library and apply the same checklist.

An open-source UI element library is a collection of individual, ready-made interface pieces—buttons, cards, inputs, toggles, loaders—that you copy into your own project and adapt. A UI framework, by contrast, is a structured system of components, conventions, and often a theming layer that governs how your whole interface is built. The practical difference: an element library gives you a snippet; a framework gives you a way of working. If you need a polished button in ten minutes, reach for the element library. If you're building a 40-screen product with a team, you probably want the framework.

What "open-source UI element library" actually means

The term gets used loosely, so it helps to separate the parts:

• Open-source: the code is publicly available, and the license tells you what you may do with it—copy, modify, redistribute, or use commercially.
• UI element: a single, self-contained piece of interface, usually small enough to read in one sitting. A button with hover states, a pricing card, a search field.
• Library: a browsable, searchable collection of those elements, typically contributed by many different people.

On a site like Uiverse, elements are shared by a community and written in plain CSS or Tailwind. You find one you like, copy the markup and styles, paste them into your project, and adjust colors, spacing, and text to fit. There's no package to install and no build step required—which is exactly the appeal, and also the source of most of the confusion.

Element library vs. UI framework: the core differences

The table isn't a verdict. It's a map of trade-offs. Element libraries win on speed and freedom; frameworks win on consistency and maintenance.

Licensing and attribution: what to check before you paste

This is where people get into trouble, and it's worth slowing down for.

1. Find the license. Every element or collection should state one. Common open-source licenses include MIT, Apache-2.0, and BSD. Some projects use copyleft licenses like GPL, which can impose obligations if you redistribute your code.
2. Understand what the license permits. MIT and Apache-2.0 are permissive: you can typically use the code in commercial and closed-source projects. Copyleft licenses may require you to release derivative source under the same terms.
3. Check attribution requirements. Permissive licenses usually require you to keep the copyright notice and license text somewhere in your project. That's a real obligation, not a formality.
4. Look for per-element terms. On community sites, the site's overall terms and the individual contributor's stated wishes may differ. If a contributor asks for credit, honor it.
5. When in doubt, ask or avoid. If a snippet has no license at all, you don't have clear permission to reuse it. Treat "no license" as "not open source," even if the code is publicly visible.

This article is general information, not legal advice. For commercial products with real exposure, have someone qualified review the licenses you're relying on.

How to use a community element in your project: a practical workflow

Here's a repeatable process that avoids most of the usual mess.

1. Start from a real need, not a browsing session

Decide what you need first—"a compact primary button with a loading state"—then search. Browsing aimlessly produces a pile of pretty snippets that don't fit together.

2. Copy the smallest version that works

Take the markup and the styles. Strip anything you don't need: demo wrappers, extra animations, decorative layers. Less code means fewer surprises.

3. Convert it to your conventions

If your project uses design tokens or CSS variables, replace hard-coded values:

/* Before: hard-coded */
.button { background: #4f46e5; border-radius: 8px; }

/* After: token-based */
.button { background: var(--color-primary); border-radius: var(--radius-md); }

This one step is what keeps a copied element from looking like a foreign object in your UI.

4. Check accessibility before you ship

Community elements vary widely here. Verify at minimum:

• Keyboard focus is visible and the element is reachable by Tab.
• Color contrast meets WCAG AA (4.5:1 for normal text).
• Interactive elements use semantic HTML (<button>, not a clickable <div>).
• Form inputs have associated labels.
• Motion respects prefers-reduced-motion.

5. Test in context

Paste it into a real page with real content. Long labels, small screens, and dark mode break more copied elements than anything else.

6. Note where it came from

Keep a short comment or an internal credits file: source, license, date. Future you—and your legal reviewer—will be grateful.

Where element libraries genuinely shine

• Prototypes and demos: you need something clickable today, not a design system.
• Landing pages and marketing sites: a handful of distinctive elements, each custom.
• Filling gaps: your framework lacks one specific component, and you don't want to build it from scratch.
• Learning: reading well-made CSS is one of the fastest ways to improve.
• Small projects: a personal site doesn't need a theming architecture.

Where they fall short

• Consistency at scale: ten elements from ten contributors rarely look like one product.
• Maintenance: you own every copy. When your design changes, you edit each one.
• Accessibility debt: you inherit whatever the contributor did or didn't do.
• No upstream fixes: a bug fixed in the original won't reach your copy.
• Integration friction: different naming conventions, different units, different assumptions about resets.

When to choose which

Choose an element library when the scope is small, the timeline is short, or you need a few distinctive pieces rather than a whole system.

Choose a framework or design system when multiple people build multiple screens over months, when consistency is a product requirement, or when accessibility and theming need to be guaranteed rather than checked.

A hybrid works well for many teams: adopt a framework for the structural components—forms, navigation, layout—and borrow individual elements for the places where you want personality. Just route every borrowed element through the same token and accessibility checks, so it lands as part of your system rather than beside it.

The short version: open-source UI element libraries are a fast, flexible way to get good-looking interface pieces into a project. They are not a substitute for a design system, and the license and accessibility details are the part worth reading carefully.

SVG icons are interface symbols stored as vector XML rather than pixels or font glyphs. Because they are vectors, they stay sharp at any size, can be recolored and restyled with CSS, and usually ship as small files. Choose a set by checking style consistency, license, coverage, and how easily you can adjust stroke and color; use it by copying the SVG markup or downloading the files and styling them in your project. The notes below explain the mechanics and use Slim Icons as a concrete example of a free, open-source set.

What SVG icons actually are

An SVG (Scalable Vector Graphics) icon is a text file describing shapes with coordinates, paths, and attributes. A browser or design tool reads that description and renders it at whatever size you request.

That differs from the two older approaches:

• Raster icons (PNG, JPG) store a fixed grid of pixels. Enlarging them reveals blur and blockiness, and you often need multiple sizes for different screens.
• Icon fonts store glyphs in a font file and display them as text characters. They scale well, but styling is limited to font properties, and a failed font load can show a blank box or a stray letter.

SVG avoids both problems: it is resolution-independent like a font, but each icon is an independent graphic you can target with normal CSS and markup.

Why SVG is the default for UI icons

Three properties matter most in interface work:

• Scaling. One file serves a 16 px toolbar button and a 64 px empty-state illustration without a second asset.
• Styling. Color, stroke width, opacity, and even individual paths can be changed with CSS or inline attributes, so icons match your theme and dark mode.
• Size and control. Simple outline icons are typically small text files, and because the markup is readable you can edit it directly instead of reopening a design tool.

A practical consequence: you can ship one icon and let the interface decide how it looks, rather than exporting a new PNG for every color and size combination.

How to choose an icon set

Compare candidates on the same dimensions instead of picking by first impression.

A set is a good fit when its style matches your product's tone, its license permits your use, and its coverage avoids obvious holes. If you need only a handful of icons, a large general-purpose library may be overkill; if you are building a design system, coverage and consistency outweigh a small file count.

A concrete example: Slim Icons

Slim Icons describes itself as a free and open-source icon library with 200 icons in a deliberately slim outline style. On its site you can:

• Adjust stroke width — the default shown is 1.5 px.
• Change color — so the same icon can match different themes.
• Reset the customization back to defaults.
• Download all icons, or browse the set on GitHub.
• Contribute or request icons if something is missing.

That combination — a single consistent outline style, adjustable stroke and color, and an open-source license — is exactly the profile you want when a project needs a small, coherent icon set rather than a sprawling one. The 200-icon count is worth weighing against your coverage needs: it suits focused products, but a very broad app may need to supplement it.

How to customize SVG icons

Customization happens through attributes and CSS, not by redrawing.

Stroke width controls how heavy an outline icon looks. A thin stroke reads as light and modern; a thicker stroke reads as bolder and more prominent. Slim Icons exposes this directly with a 1.5 px default, which you can raise or lower to match your UI's weight.

Color is set with stroke or fill, depending on whether the icon is drawn as an outline or a solid shape. Because it is a normal CSS property, you can inherit it from a parent, switch it in dark mode, or animate it on hover.

A minimal inline example:

<svg viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="1.5"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="..." />
</svg>

Using stroke="currentColor" makes the icon adopt the surrounding text color, so one file works across themes without edits.

How to add SVG icons to a project

1. Get the markup or files. Download the set, or copy an individual icon's SVG from the library. Slim Icons offers a "Download all" option and a GitHub repository.
2. Choose an integration method. Inline the SVG in your HTML/JSX for full CSS control, or save it as a .svg file and reference it with an <img> tag for simplicity.
3. Set size via the viewBox and CSS. Keep the viewBox intact and control rendered size with width/height or CSS, so the icon scales cleanly.
4. Apply color and stroke. Use currentColor for theme-aware color and set stroke-width to match your design's weight.
5. Verify. Check the icon at your smallest and largest real sizes, in light and dark mode, and confirm it aligns optically with neighboring icons and text.

Common snags

• Icons look too heavy or too light next to each other. Adjust stroke width so optical weight is consistent, not just nominal size.
• Color won't change. The SVG likely has a hardcoded fill or stroke; replace it with currentColor or override it in CSS.
• Blurry or clipped rendering. A missing or altered viewBox, or fixed pixel dimensions fighting the vector.
• License confusion. Confirm the terms before shipping; "free" and "open source" are not the same as "no conditions."

Where to find free, open-source SVG icon sets

Slim Icons is one option: a free, open-source library of 200 slim outline icons with adjustable stroke and color, downloadable in full or via GitHub. When evaluating others, apply the same table above — style, consistency, license, coverage, and customization — and prefer sets that let you change stroke and color so a single library can serve your whole interface.