Twitter Embed
Integrate Twitter content seamlessly with Bramble UI's Twitter embed component. Enhance your web design with modern social media integrations.
Single Tweet
Use dynamic lazy loading.
import dynamic from 'next/dynamic'
import { Spinner } from '@/ui'
const TwitterEmbed = dynamic(() => import('@/components/ui/twitterembed/TwitterEmbed'), {
ssr: false,
loading: () => <Spinner className='aspect-square w-11 text-info' />,
})
<TwitterEmbed
handle='nextjs'
status='1672021371919175682'
/>Output
Options
| Option | Values | Default | Notes | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
theme | dark, light | light | Display light text on a dark background | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
lang |
| English |
Arabic Example (RTL)
<TwitterEmbed
handle='PLinArabic'
status='1680161970698215424'
lang='ar'
/>Dark Theme
<TwitterEmbed
handle='adamwathan'
status='1676979739444011012'
theme='dark'
/>Timeline
View latest 10 tweets.
<TwitterEmbed
handle='elonmusk'
height={400}
/>
Timeline Options
| Option | Values | Default | Notes |
|---|---|---|---|
chrome | noheader, nofooter, noborders, transparent, noscrollbar | undefined | Toggle the display of design elements in the widget. This parameter is a space-separated list of values |
theme | dark | light | Display light text on a dark background |
height | number (px) | undefined | Height will display scrollbar |