UI Components

Explore the capabilities of our extensive Framer template, filled with diverse styles, components, animations, and CMS features, crafted to innovate your design workflow.

Visionary

Discover the versatility of our Figma UI Kit's button components, showcasing dark mode compatibility, customizable sizing, and a wide range of icon variations.

Bright/Dark Mode
Small, Regular, Large, XL (Extra Large)
Left or Right Symbol
States: Default, Hover, Chosen, Active

Notification

Ruby Smith

Compiled a report

2m ago

Zoe Johnson

Requested a chat

5m ago

James Williams

Requested a meeting

15m ago

Aiden Davis

Requested a chat

1d ago

3 unread

Mark all as seen

Featured

Master UI Component Library

🚀 Streamline development and unlock creativity with tools built for seamless integration.

Explore Templates

New

Explore Comparable UI Templates

Presenting a curated selection of meticulously crafted components, meticulously designed to elevate...

Explore Templates

Stay Updated via Email

We regularly update our content and continuously enhance our site for better user experience.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

"Rest assured, we never spam. You can expect to receive just one email per month with updates on product releases, events, and exclusive discounts.

Stay Updated on YouTube

Stay Updated on

Explore All Access

$ 199

Once Only

350+ versatile component

2500+ Figma Designs

1,800 exclusive icons

1 /* Style the code block container */

2 .code-block {

3 background-color: #2e2e2e;

4 color: #f8f8f2;

5 overflow-x: auto;

6 font-family: 'Courier New', monospace;

7 font-size: 16px;

8 }

9

10 /* Style the highlighted text */

11 .highlight {

11 background-color: #ffeb3b;

12 color: #000;

13 border-radius: 4px;

14 }

1 import React from 'react';

2 import styles from './styles.module.css';

3 const CodeBlock = ({ code }) => {

4 const highlightedCode = code.replace(

5

6 /\b(console|log|return) /\b/g,

7 (match) => `<span
class="${styles.highlight}">

8 );

9 return (

10 <div className={styles.codeBlock}>

10 <pre dangerouslySetInnerHTML={{ __html: highlightedCode }} />

12 </div>

13 );

14 };

1 / / type or paste the code you

2 highlight below

3 / / or select a text node and plugin

4 plugin

5

6 import syntaxHighlight form 'syntax-

7 highlight'

8

9 const codeBlock =

10 document.querySelector

11

12 function highlight(code) {

13 return syntaxHighlight(code)

14 }