Sira
PlaygroundPlayground (opens in a new tab)
GitHubGitHub (opens in a new tab)
  • Guide
    • Installation
    • Usage
    • Customization

  • Base
    • Basic Styles
  • Components
    • Overview
    • Accordion
    • Avatar
    • Badge
    • Breadcrumbs
    • Button
    • Checkbox
    • Drawer
    • Dropdown
    • Input
    • Link
    • Loader
    • Modal
    • Prompt
    • Radio
    • Select
    • Steps
    • Switch
    • Table
    • Tabs
    • Tooltip
  • Utilities
    • Overview
    • Shadow
  • Snippets
    • Gradient Text
  • Documentation
    • Guide
      • Installation
      • Usage
      • Customization
    • Components
      • Overview
      • Accordion
      • Avatar
      • Badge
      • Breadcrumbs
      • Button
      • Checkbox
      • Drawer
      • Dropdown
      • Input
      • Link
      • Loader
      • Modal
      • Prompt
      • Radio
      • Select
      • Steps
      • Switch
      • Table
      • Tabs
      • Tooltip
    • Utilities
      • Overview
      • Shadow
  • Playground (opens in a new tab)
  • Support Us
    • Product Hunt (opens in a new tab)
    • Buy me a coffee (opens in a new tab)
Question? Give us feedback → (opens in a new tab)Edit this page
Documentation
Snippets
Gradient Text

Gradient Text

Preview

Code

HTML

Code

JSX/TSX

Gradient Text

<div
class="w-fit font-bold from-[#6366F1] via-[#D946EF] to-[#FB7185] bg-gradient-to-r bg-clip-text text-transparent"
>
<p>Gradient Text</p>
</div>
<div className='w-fit font-bold from-[#6366F1] via-[#D946EF] to-[#FB7185] bg-gradient-to-r bg-clip-text text-transparent'>
<p>
Gradient Text
</p>
</div>
Shadow

Sira

Customizable and accessible design system which provides TailwindCSS component class name library to build modern UI.

Powered & Maintained & Used by Ricco Xie. All rights reserved. Copyright © Since 2023

Resources

  • Get Started
  • Customization
  • Components

Links

  • Open Source
  • Report issue
  • License