Development

Implementing themes

Use our Figma Plugin (recommended)

ShadcnUI Theme Pal generates CSS variables based on your Figma variables for your Shadcn UI projects. This plugin works exclusively with our UI kit and is tailored for projects using ShadcnUI.

1. Open Shadcn UI Kit for Figma.
2. Open the ShadcnUI Theme Pal plugin in the UI kit.
3. Click "Generate CSS".
4. Copy and paste into your Shadcn UI project's globals.css file.

Implement themes manually

Before implementing the theme, familiarize yourself with how theming works in shadcn/ui by reading their official documentation.

1. In dev mode, navigate to the Plugins tab.
2. Search for "Variables exporter for dev mode" in the search bar.
3. Run the plugin and click the "Export Variables" button.
4. Locate the '/ 2. Theme.Default.tokens.json /' section in your exported JSON.
5. Update your project's CSS variables based on the exported data. Check for the color values in the TailwindCSS section if they are referenced. See the example below how ‘primary-light’ and ‘primary-light’ JSON variables were translated to the CSS variables. Make sure to convert the hex values into hsl values.
6. For other theme settings like font family, update your CSS according to the JSON variables.
7. To edit the styling of the components, check which components were marked as modified by designers.
8. Adjust the styling of components in your code to match the designs in Figma.

JSON

/* 2. Theme.Default.tokens.json */

{
  "colors": {
    { . . . }
    "primary-light": {
      "type": "color",
      "value": "{tailwind colors.blue.600}"
    },
    "primary-dark": {
      "type": "color",
      "value": "{tailwind colors.blue.700}"
    },
   { . . . }
  },

CSS

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 224 76% 48%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

Implementing components

Implementing shadcn/ui components based on your Figma designs can be an efficient way to bridge the gap between design and development. Here's a step-by-step guide on how you can do this:

1. Analyze the Figma design: Start by thoroughly examining your Figma design. Take note of the components, layout, colors, typography, and any custom elements.
2. Identify matching shadcn/ui components: shadcn/ui offers a wide range of pre-built components. Identify which ones closely match the elements in your Figma design. Common components include Button, Card, Input, Dropdown, etc.
3. Set up your project: Ensure you have a Next.js project set up with shadcn/ui installed. More details here.
4. Implement the components: Create React components that use shadcn/ui components as building blocks. Here's an example of how you might implement a card from your Figma design.
5. Style your components: Use Tailwind CSS classes to style your components to match your Figma design. shadcn/ui is built with Tailwind, so you can easily customize the appearance.
6. Customize theme: Adjust your Tailwind configuration to match your Figma design system. More details on theming here.
7. Handle responsive design: Use Tailwind's responsive classes to make your components responsive, matching any breakpoints defined in your Figma design.
8. Implement interactions: Use React hooks to add any interactions specified in your Figma prototype.
9. Accessibility: Ensure your implementation maintains accessibility. shadcn/ui components are built with accessibility in mind, but double-check that your usage and any customizations preserve this.
10. Iterate and refine: Compare your implemented components with the Figma design. Make adjustments as needed, possibly creating custom components or extending shadcn/ui components for perfect alignment with your design.

Remember, while shadcn/ui provides a great starting point, you may need to create custom components or extend existing ones to perfectly match your Figma designs. The goal is to use shadcn/ui as a foundation and customize as needed to achieve your specific design requirements.

By following these steps, you can efficiently implement shadcn/ui components based on your Figma designs, creating a cohesive and visually appealing user interface that closely matches your design specifications.

Using v0 by Vercel

v0 is an advanced AI coding assistant created by Vercel. It's designed to help developers and designers quickly turn ideas into functional code, particularly focusing on web development. v0 can be a powerful tool to help you implement your Figma designs quickly and efficiently.

Prompting

Here's how you can use v0 to turn your Figma designs into code with prompting:

1. Describe your design: Start by describing the key elements and layout of your Figma design to v0. Be as specific as possible about the components, layout, colors, and interactions you want to implement.
2. Generate components: v0 can generate React components based on your descriptions. You can ask for specific UI elements like headers, navigation bars, cards, or more complex layouts.
3. Customize styles: v0 uses Tailwind CSS for styling, which aligns well with design systems. You can specify colors, spacing, and other design tokens from your Figma file, and v0 will incorporate them into the generated code.
4. Iterate and refine: If the generated component doesn't match your Figma design perfectly, you can provide more details or ask for specific modifications. v0 can adjust the code based on your feedback.
5. Implement interactions: Describe any interactions or state changes in your Figma prototype, and v0 can help implement them using React hooks and state management.
6. Ensure accessibility: v0 implements accessibility best practices, but you can also ask for specific accessibility features to match your Figma design's requirements.
7. Responsive design: Describe how your Figma design should behave on different screen sizes, and v0 can help implement responsive layouts using Tailwind CSS classes.
8. Copy and integrate: Once you're satisfied with the generated components, you can copy the code and integrate it into your Next.js project.

Image and prompt

You can ask v0 to implement shadcn/ui code based on an image. This is one of v0's powerful features that can significantly speed up your development process. Here's how you can do it:

1. Image Upload: v0 allows you to upload or attach images via the prompt form on the v0.dev interface.
2. Image Analysis: Once you've uploaded an image, v0 can analyze and interpret the design elements in the image.
3. Description and Request: After uploading the image, you can describe what you see in the image and ask v0 to implement it using shadcn/ui components. Be as specific as possible about the layout, components, and any interactions you want to implement.
4. Code Generation: v0 will then generate React code using shadcn/ui components that closely matches the design in your image.
5. shadcn/ui Integration: v0 is pre-configured to use shadcn/ui components, which it imports from "@/components/ui" . This means the generated code will automatically use these components where appropriate.
6. Customization: If the generated code doesn't perfectly match your image, you can ask v0 to make specific adjustments or modifications.

Here's an example of how you might phrase your request to v0:

"I've uploaded an image of a login form. Can you implement this using shadcn/ui components? The form has input fields for email and password, a 'Remember me' checkbox, a 'Forgot password?' link, and a submit button. The layout is centered on the page with a card-like appearance."

Remember, while v0 is very capable, it may not perfectly replicate every detail of your design on the first try. You may need to provide additional details or request specific adjustments to get the exact result you're looking for.