Buy now $39

More from author

Fhibli

A timeless, Ghibli Studio inspired, UI kit for Framer by Lauri Lännenmäki

A timeless, Ghibli Studio inspired, UI kit for Framer by Lauri Lännenmäki

Create awesome websites and templates with this flexible UI kit. It’s a great starting point whether you’re building a site, designing a template, or putting together your own component library. Just remix and start building.

Create awesome websites and templates with this flexible UI kit. It’s a great starting point whether you’re building a site, designing a template, or putting together your own component library. Just remix and start building.

Live preview

Buy now $39

Accordion

Expandable sections for showing and hiding content. Choose between 2-10 accordion items.

Question number one

Answer to question one. In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question number two

Answer to question two. In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question number three

Answer to question three. In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question number one

Answer to question one. In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question number two

Answer to question two. In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question number three

Answer to question three. In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question number one

Answer to question one. In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question number two

Answer to question two. In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question number three

Answer to question three. In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Avatar

A small, circular or square image that represents the user. Also, an avatar as list item for more advanced use.

Avatar image

Avatar list item

Firstname Lastname

username@framer.com

Badges

Tiny label for status, counts, or highlights.

Success

Neutral

Informative

Danger

Banner

Top-of-page alert or announcement bar.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Banner Title

Longer description text for the banner.

Buttons

Triggers actions like submit, save, or send. Two sizes and a possibility for a left or right icon.

Medium

Default

Button

Button

Button

Button

Button

With start icon

Button

Button

Button

Button

Button

With end icon

Button

Button

Button

Button

Button

With badge

Button

3

Button

3

Button

3

Button

3

Button

3

Small

Default

Button

Button

Button

Button

Button

With start icon

Button

Button

Button

Button

Button

With end icon

Button

Button

Button

Button

Button

Icon Buttons

A button that uses only an icon instead of text. Two sizes.

Medium

Small

Cards

A container for grouped content or actions.

Grit UI, Framer plugin and UI Kit

Grit UI is a powerful plugin that equips you with production-ready sections, components, and forms. Design, refine, and publish your website directly in Framer.

Try the plugin

Grit UI, Framer plugin and UI Kit

Grit UI is a powerful plugin that equips you with production-ready sections, components, and forms. Design, refine, and publish your website directly in Framer.

Try the plugin

Grit UI, Framer plugin and UI Kit

Grit UI is a powerful plugin that equips you with production-ready sections, components, and forms. Design, refine, and publish your website directly in Framer.

Try the plugin

Grit UI, Framer plugin and UI Kit

Grit UI is a powerful plugin that equips you with production-ready sections, components, and forms. Design, refine, and publish your website directly in Framer.

Try the plugin

Grit UI, Framer plugin and UI Kit

Grit UI is a powerful plugin that equips you with production-ready sections, components, and forms. Design, refine, and publish your website directly in Framer.

Try the plugin

Grit UI, Framer plugin and UI Kit

Grit UI is a powerful plugin that equips you with production-ready sections, components, and forms. Design, refine, and publish your website directly in Framer.

Try the plugin

Context Menu

A small menu with quick actions. Not a component for ultimate flexibility. Create whatever you want using a ready-made structure.

Edit

Copy

Favorite

Delete

Firstname Lastname

username@framer.com

Account

Billing

Notifications

Sign out

Framer Forms*

Inputs, fields, and controls. All created using Framer Forms inputs for easy use.

(Framer Forms = Capture all the information you need from your website visitors with Forms in Framer, all without writing a single line of code.)

*Switch is not included in Framer Forms.

Radio group title

Radio group title

Radio group title

Switch label

Some more text about this switch here.

Switch label

Some more text about this switch here.

Switch label

Some more text about this switch here.

Modal

A pop-up window for focused tasks or info.

Can I use Fhibli for commercial projects?

Ofcourse! You can use Fhibli UI anyway you like. Create templates, do client work or extend.

Cancel

Do the thing

Can I use Fhibli for commercial projects?

Ofcourse! You can use Fhibli UI anyway you like. Create templates, do client work or extend.

Cancel

Do the thing

Can I use Fhibli for commercial projects?

Ofcourse! You can use Fhibli UI anyway you like. Create templates, do client work or extend.

Cancel

Do the thing

Tabs

Switch between sections without leaving the page.

First tab

Second tab

First tab

Second tab

Third tab

First tab

Second tab

Third tab

Fourth tab

First tab

Second tab

Third tab

Fourth tab

Fifth tab

Toast

Small, temporary notification that pops up.

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Toast Title

Longer description text for the banner.

Button

Tooltip

Tiny label that appears on hover for extra info.

This is a tooltip with a pointer on the bottom.

This is a tooltip with a pointer on the bottom.

This is a tooltip with a pointer on the bottom.

This is a tooltip with a pointer on the bottom.

This is a tooltip with a pointer on the bottom.

This is a tooltip with a pointer on the bottom.

This is a tooltip with a pointer on the left.

This is a tooltip with a pointer on the left.

This is a tooltip with a pointer on the left.

This is a tooltip with a pointer on the top.

This is a tooltip with a pointer on the top.

This is a tooltip with a pointer on the top.

Typography

Pre-styled text elements for clear, readable content.

Heading 1 — Lorem ipsum

Heading 2 — Lorem ipsum

Body LG — In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 3 — Lorem ipsum

Body MD — In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 — Lorem ipsum

Body SM — In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 5 — Lorem ipsum
Heading 6 — Lorem ipsum

Body SM — In hac habitasse platea dictumst. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Fusce fermentum odio nec arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Label — for buttons and forms

Badge — just for badge

Other products from Lauri Lännenmäki

Grit UI, Framer plugin and UI Kit

Grit UI is a powerful plugin that equips you with production-ready sections, components, and forms. Design, refine, and publish your website directly in Framer.

Try the plugin

Grit UI, Framer plugin and UI Kit

Grit UI is a powerful plugin that equips you with production-ready sections, components, and forms. Design, refine, and publish your website directly in Framer.

Try the plugin

Grit UI, Framer plugin and UI Kit

Grit UI is a powerful plugin that equips you with production-ready sections, components, and forms. Design, refine, and publish your website directly in Framer.

Try the plugin

Dynamiq, SaaS template for Framer

Template perfect for SaaS, agencies, and startups. With 9 unique pages and 6 CMS collections, it offers a seamless blend of functionality and innovation.

View template

Dynamiq, SaaS template for Framer

Template perfect for SaaS, agencies, and startups. With 9 unique pages and 6 CMS collections, it offers a seamless blend of functionality and innovation.

View template

Dynamiq, SaaS template for Framer

Template perfect for SaaS, agencies, and startups. With 9 unique pages and 6 CMS collections, it offers a seamless blend of functionality and innovation.

View template

SoloStore, Portfolio template for Framer

SoloStore is a minimalist portfolio and ecommerce template, crafted for designers and creators. Its layout is sleek and visually striking, designed to captivate and engage audiences.

View template

SoloStore, Portfolio template for Framer

SoloStore is a minimalist portfolio and ecommerce template, crafted for designers and creators. Its layout is sleek and visually striking, designed to captivate and engage audiences.

View template

SoloStore, Portfolio template for Framer

SoloStore is a minimalist portfolio and ecommerce template, crafted for designers and creators. Its layout is sleek and visually striking, designed to captivate and engage audiences.

View template

GridWorks, Portfolio template for Framer

Create a sleek, minimalist portfolio or blog in minutes with my free black-and-white "GridWorks" Framer template. No navigation, one font — just pure, stylish simplicity.

Remix for free

GridWorks, Portfolio template for Framer

Create a sleek, minimalist portfolio or blog in minutes with my free black-and-white "GridWorks" Framer template. No navigation, one font — just pure, stylish simplicity.

Remix for free

GridWorks, Portfolio template for Framer

Create a sleek, minimalist portfolio or blog in minutes with my free black-and-white "GridWorks" Framer template. No navigation, one font — just pure, stylish simplicity.

Remix for free

Follow for more @laurilllll