# Components in Creght | Creght Visual Documentation

> Elements such as frames and text elements are the basic building blocks of a page. When you need to reuse elements across multiple pages or locations, you can c…

[AI](/docs/ai/quick-create-first-website.md) [Visual](/docs/get-start.md)

Basic

- [Get to Know Creght in 2 Minutes](/docs/get-start.md)
- [How to Register for Creght](/docs/signup.md)
- [Creating a Project in Creght](/docs/create-site.md)
- [Templates](/docs/tpls.md)

Design

- [Using the Editor](/docs/editor.md)
- [Basic Operations](/docs/operating.md)
- [Layouts in Creght](/docs/layout.md)
- [Position in Creght](/docs/position.md)
- [Size in Creght](/docs/size.md)
- [Breakpoints in Creght](/docs/breakpoint.md)
- [Overlays](/docs/popover.md)
- [Components in Creght](/docs/components.md)
- [Adding Third-Party Fonts](/docs/tp-font.md)
- [Duplicate and Deep Copy](/docs/deep-copy.md)

CMS

- [CMS (Content Management System)](/docs/cms.md)
- [Importing WeChat Official Account Articles into CMS](/docs/wxmp.md)

Site Setting

- [Page Settings](/docs/page-setting.md)
- [How to Upgrade a Plan](/docs/manage-plan.md)
- [SEO Settings](/docs/seo-setting.md)
- [Small Files (Site Verification)](/docs/verification-file.md)
- [Adding a Custom Domain in Creght](/docs/custom-domain.md)
- [How to Complete ICP Filing](/docs/beian.md)
- [Server Nodes](/docs/website-node.md)
- [How to Switch Sites](/docs/pxrp79jqtnyq.md)
- [Localization](/docs/localization.md)

AI

- [About Creght AI](/docs/creght-ai.md)

Tool

- [Convert Figma Designs into Live Websites](/docs/figma-to-creght.md)
- [3 Guidelines for Responsive Figma Layouts](/docs/figma-autolayout.md)
- [Covert Figma to live website](/docs/response-site.md)
- [Figma to Responsive Website: Interactions](/docs/figma03.md)
- [Compressing Video with FFmpeg](/docs/ffmpeg.md)
- [How to Add Clarity to Your Website](/docs/clarity.md)
- [Creating a Button Hover Effect](/docs/button.md)
- [How to Build a Reusable Collapsible FAQ Panel](/docs/collapse.md)
- [Responsive Navigation Tutorial](/docs/nav.md)

Design/

# Components in Creght

Elements such as **frames** and **text elements** are the basic building blocks of a page. When you need to reuse elements across multiple pages or locations, you can convert them into **components**. Common examples include **button components** and **navigation components**.![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/lXZLFShRykf__image.png)

## Creating a Component

1. Select a group of elements you want to reuse.
2. Right-click and choose **“Create Component”**.
3. The newly created component will be added to your **Assets** panel.
4. Drag the component from the Assets panel onto the canvas whenever you need it.

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/lXZLGEXmsif__image.png)

## Detaching a Component

1. Select the component on the canvas.
2. Right-click and choose **“Detach Component”**.
3. The component will be broken down into its original elements at the same position.

## Component Variants

Components can have multiple **variants**, allowing you to create different styles or states. For example:

- Buttons can have **hover** and **pressed** states.
- Buttons can also have **primary** and **secondary** styles.

These different appearances are managed using **variants**.

### Adding a Hover Variant

1. Select the root element of the component.
2. Click **“Add Variant”** to create a new variant.
3. When a component has multiple variants, you can switch between them in the component’s **Properties Panel**.

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/lXZLIpLzwhF__image.png)

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/lXZLJmocRhd__image.png)

## Transition Effects Between Variants

If the same element has different properties (e.g., color) across variants, Creght will automatically add a **0.3s transition** when switching between variants, creating smooth visual effects.

This version keeps a professional tone, clear hierarchy, and uses step-by-step instructions suitable for a help center.

On this page

- [Creating a Component](#creating-a-component)
- [Detaching a Component](#detaching-a-component)
- [Component Variants](#component-variants)
- [Adding a Hover Variant](#adding-a-hover-variant)
- [Transition Effects Between Variants](#transition-effects-between-variants)

> Full page index: [/llms.txt](/llms.txt)