Skip to content
Get packs

Guide · Open source

How to use Creative Tim UI: install and add components

Updated · written with AI from the project's own documentation and checked against our catalogue data

Creative Tim UI is an open-source library of pre-built React components and page blocks, such as modals, testimonials, footers and checkout sections, built on top of shadcn/ui. This guide shows you how to check the prerequisites, add components to a Next.js project with a single command, and understand what you get. By the end you will be able to add a component or the full library and start editing the copied code.

Creative Tim UIcreativetimofficial/ui · ★ 12.1k · MIT

Quick start

  1. 1Check prerequisites. Confirm your Next.js project has Node.js 18 or later, shadcn/ui initialized and Tailwind CSS configured.
  2. 2Pick a component. Choose a component or block from the docs list, such as card or footer.
  3. 3Run the add command. Run npx @creative-tim/ui@latest add with the component name.
  4. 4Review the copied files. Open the component in your components directory, where it has been copied into your project.
  5. 5Customize the code. Edit the component directly to match your design and content.

Check the prerequisites before you install

The README describes setup for Next.js projects only. Before running any Creative Tim UI command, your project needs three things: Node.js 18 or later, shadcn/ui initialized in the project, and Tailwind CSS configured.

  • Node.js 18 or later
  • shadcn/ui initialized in your project (npx shadcn@latest init)
  • Tailwind CSS configured

Add a single component to your project

Use the Creative Tim UI CLI with npx and pass the name of the component you want. The README's example installs the card component. The CLI copies the component into your configured components directory so you can edit it directly.

npx @creative-tim/ui@latest add <component-name>

Add all components at once

If you want the full collection, run the add command with the all keyword. According to the README, this command sets up shadcn/ui if it is not already configured, installs all Creative Tim UI components into your components directory, and adds the dependencies they need.

  • Sets up shadcn/ui if not already configured
  • Installs all components to your configured components directory
  • Adds necessary dependencies to your project
npx @creative-tim.com/ui@latest add all

Use the shadcn CLI instead

If you prefer the standard shadcn/ui CLI, you can install from the Creative Tim registry URLs. The README shows one command for all components and one for a single component, using the button example.

npx shadcn@latest add https://creative-tim.com/ui/r/all.json npx shadcn@latest add https://creative-tim.com/ui/r/button.json

Find and use blocks

Blocks are ready-to-use page sections organized by category. The README lists Application UI (Modals, Account, Billing), Marketing (Testimonial Sections, Contact Sections, Footers, FAQs, Blog), Ecommerce UI (product listings, shopping carts and checkout flows) and Web 3.0 cards. Each block is fully customizable and can be added with a single command. The full component list is on the project's docs pages.

  • Application UI: Modals, Account, Billing
  • Marketing: Testimonial Sections, Contact Sections, Footers, FAQs, Blog
  • Ecommerce UI: Ecommerce Sections
  • Web 3.0: Web 3.0 Cards

Contribute changes back

If you want to improve the library, the README asks contributors to fork the repository, create a branch, make changes to the components in the registry, and open a pull request to the main branch. Read the contributing guide in the repository before you start.

  • Fork the repository
  • Create a new branch
  • Make your changes to the components in the registry
  • Open a PR to the main branch

What people use it for

  • Adding a pricing or testimonial section to a Next.js marketing site
  • Building a settings or account page with ready-made modals and forms
  • Adding a footer and FAQ block to a landing page
  • Setting up a checkout or product listing layout for an ecommerce Next.js app

Frequently asked questions

Is Creative Tim UI free to use?

The project is licensed under the MIT license, as stated in the README. The license file is linked from the repository. Check the license file for the full terms before using it in a commercial project.

What do I need to install Creative Tim UI?

The README lists Node.js 18 or later, shadcn/ui initialized in your project, and Tailwind CSS configured. It describes setup for Next.js projects only.

Does Creative Tim UI work with React without Next.js?

The README describes setup for Next.js projects only, so it does not document other React setups. If your project is not Next.js, check the project's docs before relying on it.

What is the difference between Creative Tim UI and shadcn/ui?

Creative Tim UI is built on top of shadcn/ui and adds pre-built components and page blocks such as footers, FAQs and checkout sections. The README says the foundational atomic components come from shadcn/ui.

Why does the install command fail?

The README lists prerequisites that must be met first. Make sure shadcn/ui is initialized with npx shadcn@latest init and Tailwind CSS is configured before running the add command.

Can I edit the components after I install them?

Yes. The CLI copies components into your project so you can edit them directly, and the README describes the blocks as fully customizable.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Creative Tim UI suits Next.js developers who already use or want to use shadcn/ui and Tailwind CSS and need ready-made sections they can edit. If your project does not use React or Next.js, or you need a complete app template rather than individual components, pick a different tool.

Install options & downloads