Welcome
Discover LY UI components
Welcome to the LY UI documentation! Discover simple, elegant, and ready-to-use components for your interfaces.
Get Started in Style
Quickly create modern interfaces with our reusable and fully customizable components.
These components are built with React, Next.js, Tailwind CSS,shadcn, and also leverage Motion/React for smooth animations.
Why LY UI?
- Clean and modern design
- Easy to integrate
- Fully customizable to fit your needs
- Built-in animation support with Motion React (Framer Motion)
- Clear documentation and practical examples
Explore each component and bring your ideas to life in just a few clicks!
1. Add Required Styles
Add this essential CSS to your global stylesheet for optimal scrollbar styling:
* {
scrollbar-width: thin;
scrollbar-color: gray transparent;
}2. Markdown Content Styling
For rich content rendering, include our comprehensive markdown styles:
.markdown-content {
* {
margin: 0 !important;
font-family: var(--instrument);
}
}
.dark .markdown-content {
* {
margin: 0 !important;
}
}
/* === Markdown Container Base === */
.markdown-content {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.5;
color: #18181b;
font-size: 1.0625rem;
}
.dark .markdown-content {
color: #fafafa;
}
/* === Headings === */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
color: #d64b20;
font-family: var(--instrument);
font-weight: 700;
line-height: 1.2;
margin-top: 1.5em;
margin-bottom: 0.4em;
}
.markdown-content h1 {
font-size: 2.325rem;
font-weight: 700;
margin-top: 1.8em;
margin-bottom: 0.6em;
}
.markdown-content h2 {
font-size: 1.825rem;
font-weight: 700;
margin-top: 1.4em;
margin-bottom: 0.5em;
}
.markdown-content h3 {
font-size: 1.45rem;
font-weight: 700;
margin-top: 1.2em;
margin-bottom: 0.4em;
}
.markdown-content h4 {
font-size: 1.3625rem;
font-weight: 700;
margin-top: 1em;
margin-bottom: 0.3em;
}
.markdown-content h5 {
font-size: 1rem;
font-weight: 700;
margin-top: 0.8em;
margin-bottom: 0.3em;
}
.markdown-content h6 {
font-size: 1.0375rem;
font-weight: 700;
margin-top: 0.6em;
margin-bottom: 0.2em;
}
/* === Paragraphs === */
.markdown-content p {
margin-bottom: 0.8em;
color: #18181b;
font-size: 1.325rem;
line-height: 1.5;
}
.dark .markdown-content p {
color: #fafafa;
}
/* === Lists === */
.markdown-content ul,
.markdown-content ol {
padding-left: 2em;
color: #18181b;
font-size: 1.0625rem;
line-height: 1.4;
margin-bottom: 0.8em;
}
.dark .markdown-content ul,
.dark .markdown-content ol {
color: #fafafa;
}
.markdown-content li {
margin-bottom: 0.2em;
font-size: 1.2625rem;
line-height: 1.4;
}
.markdown-content ul {
list-style-type: disc;
}
.markdown-content ol {
list-style-type: decimal;
}
/* === Links === */
.markdown-content a {
color: #d64b20;
text-decoration: underline;
transition: color 0.2s ease;
font-size: 1.0625rem;
}
.markdown-content a:hover {
color: #18181b;
}
.dark .markdown-content a {
color: #d64b20;
}
.dark .markdown-content a:hover {
color: #fafafa;
}
/* === Code and Preformatted Text === */
.markdown-content code {
background-color: #d83737;
color: white;
padding: 0.18em 0.5em;
border-radius: 0.25rem;
font-family: "Fira Code", "Consolas", monospace;
font-size: 0.9375rem;
}
.dark .markdown-content code {
background-color: #18181b;
color: #d64b20;
}
.markdown-content pre {
background-color: #18181b;
color: #fafafa;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1em;
font-size: 0.9375rem;
}
.dark .markdown-content pre {
background-color: #18181b;
color: #fafafa;
}
/* === Blockquotes === */
.markdown-content blockquote {
border-left: 4px solid #d64b20;
padding-left: 1.2em;
margin: 1em 0;
color: #18181b;
background: #fff7f0;
font-size: 1.0625rem;
line-height: 1.5;
}
.dark .markdown-content blockquote {
border-left-color: #d64b20;
color: #fafafa;
background: #2a1a12;
}
/* === Tables === */
.markdown-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1em;
color: #18181b;
font-size: 1.0625rem;
}
.dark .markdown-content table {
color: #fafafa;
}
.markdown-content th,
.markdown-content td {
border: 1px solid #d64b20;
padding: 0.5em 0.7em;
text-align: left;
font-size: 1.0625rem;
line-height: 1.4;
}
.markdown-content th {
background-color: #fff7f0;
font-weight: 600;
color: #18181b;
}
.dark .markdown-content th,
.dark .markdown-content td {
border-color: #d64b20;
}
.dark .markdown-content th {
background-color: #2a1a12;
color: #fafafa;
}
``