> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Build Your Own Widget Design

Build your own design for populate widgets with the UiChemy Composer widget.


**Not finding the style you want in a widget?** Build your own design with HTML, CSS and JavaScript in the **UiChemy Composer** widget, with AI.

- Populate widgets, such as **Blog/Post Listing**, **Pricing Table**, and **Testimonial**, come with a set of ready-made styles. See the full list under [Populate Widgets](#populate-widgets).
- When none of them fit, click the **Learn More** button inside the widget, then follow the steps for that widget below.
- You get the steps and a ready-to-copy prompt.

### Populate Widgets

<Columns cols={2}>
  <Card title="Blog/Post Listing" icon="newspaper" href="/uichemy-composer/widget-styles/populate-widgets/blog-post-listing">
    Build your own post cards, grid, or list.
  </Card>
  <Card title="Gallery" icon="image" href="/uichemy-composer/widget-styles/populate-widgets/gallery">
    Build your own image grid, masonry, or lightbox.
  </Card>
  <Card title="Testimonial" icon="quote" href="/uichemy-composer/widget-styles/populate-widgets/testimonial">
    Build your own review cards or slider.
  </Card>
  <Card title="Team Member" icon="users" href="/uichemy-composer/widget-styles/populate-widgets/team-member">
    Build your own team cards and profiles.
  </Card>
  <Card title="Pricing Table" icon="badge-dollar-sign" href="/uichemy-composer/widget-styles/populate-widgets/pricing-table">
    Build your own plans, toggles, and feature lists.
  </Card>
  <Card title="Info Box" icon="info" href="/uichemy-composer/widget-styles/populate-widgets/info-box">
    Build your own feature boxes with icons.
  </Card>
  <Card title="Carousel Anything" icon="gallery-horizontal" href="/uichemy-composer/widget-styles/populate-widgets/carousel-anything">
    Build your own slider for any content.
  </Card>
  <Card title="Process/Steps" icon="list-ordered" href="/uichemy-composer/widget-styles/populate-widgets/process-steps">
    Build your own step-by-step process.
  </Card>
  <Card title="Accordion" icon="list-collapse" href="/uichemy-composer/widget-styles/populate-widgets/accordion">
    Build your own FAQ or collapsible content.
  </Card>
  <Card title="Tabs/Tours" icon="panels-top-left" href="/uichemy-composer/widget-styles/populate-widgets/tabs-tours">
    Build your own tabbed or step-through content.
  </Card>
  <Card title="Table" icon="table" href="/uichemy-composer/widget-styles/populate-widgets/table">
    Build your own data or comparison table.
  </Card>
</Columns>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Do I need to remove the widget I'm using now?" default-open="false">
    No. Your current widget and the Composer can sit on the same page. Keep the widget where a ready-made style works, and use the Composer where you want a custom design.
  </Expandable>
  <Expandable title="Do I need UiChemy Pro to build my own design?" default-open="false">
    No. The Composer widget comes with the free UiChemy plugin. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
  </Expandable>
  <Expandable title="Do I need an AI tool?" default-open="false">
    No. Connecting an AI tool is the fastest way to build, but you can always write the code yourself in the Composer's **Code** tab.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="What Is a Composer?" href="/uichemy-composer/uichemy-widget/what-is-a-uichemy-widget">
    See what the Composer can build.
  </Card>
  <Card title="Set Up AI to WordPress" href="/ai-to-wordpress/set-up">
    Connect Claude, Cursor, Codex, or Antigravity to your site.
  </Card>
</Columns>